牛人帮忙看看代码

[zhenchaoyang]

<div style="height:312px;width:312px;background:#BC0020;">
<a style="display:block;" href="http://siteadmin.taobao.com/module/#" target="_blank">
<img style="border-top:#DDD 1px solid;border-right:#DDD 1px solid;border-bottom:#DDD 1px solid;border-left:#DDD 1px solid;" src="" width="310px" height="310px">
</a>
</div>

明明图片的边框设的是近白色，怎么右边和底部有一条红线呢。

[zhenchaoyang]

我的图片是310PX,加上两边的边框2PX一共是312PX,不是把整个DIV占满了吗，怎么还会有影响呢

[卡布洛]

引用 4 楼 u011523992 的回复:

我的图片是310PX,加上两边的边框2PX一共是312PX,不是把整个DIV占满了吗，怎么还会有影响呢

你把你的a的display：block去掉

[卡布洛]

<div style="height:312px;width:312px;background:#BC0020;"> <a href="http://siteadmin.taobao.com/module/#" target="_blank"> <img style="border:#DDD 1px solid; width:310px; width:310px;" src=""> </a> </div> 你试试

[zhenchaoyang]

去掉display：block没用。按最下面的只要加上一张图片就还是有这个问题

[卡布洛]

引用 7 楼 u011523992 的回复:

去掉display：block没用。按最下面的只要加上一张图片就还是有这个问题

我还就不信了。。。 你试下面的代码：

    <div style="height:312px; width:312px; background:#BC0020; float:left;">
<a href="http://siteadmin.taobao.com/module/#" target="_blank">
<img  style="border:#DDD 1px solid; width:310px; width:310px;" src="http://g.hiphotos.baidu.com/album/w%3D2048/sign=4106f3c3d000baa1ba2c40bb7328b812/0e2442a7d933c8950f78a654d01373f08202009e.jpg">
</a>
</div>

[xuzuning]

和浏览器有关吧？我怎么没看到你说的现象？

[zhenchaoyang]

你用的什么浏览器？

[zhenchaoyang]

我试了一下，用火狐没有，用IE和360的都有，这个是什么原因呢

[shaoniandota]

我觉得 是ie的a有个默认的颜色！，你先申明a的颜色行不行看看。。

[zhenchaoyang]

xiaowanzi80hou你把页面放大看看，可能放大到某个比例就有问题，再大一点又没问题

[Q312425336]

你代码写错了，图片大小设定不起作用，默认原大小显示。 原来的： 【width="310px" height="310px"】 改为 【width="310" height="310"】 这样就没问题了。

[zhenchaoyang]

不是的哦，明显显示的不是310像素

[xiaowanzi80hou]

应该是浏览器的问题，我用chrome和IE8就没有这种问题

[zhenchaoyang]

改成PNG还是一样的。A的默认颜色不是红色吧

[KK3K2005]

</a> </div> ---> </a></div>

[zhenchaoyang]

这是什么写法？

[xieweiguang11]

css加入头文件 保证元素边框像素全部清0 有些时候可能是浏览器自身原因，

[螃蟹k3179]

把所有换行去掉写在一行里面。

[SY_JanSheng]

怎么试都不行...IE8...就是最底下有个4px左右的红底...只能肯定是背景的...用IE自带的开发人员工具看了硬是说父层有316px的高，而里面明明只有312px，margin padding border都调过还是不行...果然只能用overflow来解决这类情况么？可还是想知道IE处理这些情况的规则...求大牛！

[SY_JanSheng]

上网搜了一下，虽然没有具体解释（原因），但是其解决方法还是可以用的~下面代码中，第一个是楼主的问题的那种情况，第二个是在img那里加了个display:block;来解决的，第三个是加了vertical-align:top;属性，而最后一个，我自己观察出来的，直接把img的margin给改了 = = 当然，还可以用overflow:hidden; 这种方法应该最简单了吧（勿喷勿喷 = =） 还是希望有人解释一下原理 = =

<div style="height:312px;width:312px;background:#BC0020; float:left;">
<a href="http://siteadmin.taobao.com/module/#" target="_blank">
<img  style="border:#DDD 1px solid; width:310px; height:310px;" src="http://g.hiphotos.baidu.com/album/w%3D2048/sign=4106f3c3d000baa1ba2c40bb7328b812/0e2442a7d933c8950f78a654d01373f08202009e.jpg">
</a>
</div>

<div style="height:312px;width:312px;background:#BC0020; float:left;">
<a href="http://siteadmin.taobao.com/module/#" target="_blank">
<img  style="display:block; border:#DDD 1px solid; width:310px; height:310px;" src="http://g.hiphotos.baidu.com/album/w%3D2048/sign=4106f3c3d000baa1ba2c40bb7328b812/0e2442a7d933c8950f78a654d01373f08202009e.jpg">
</a>
</div>

<div style="height:312px;width:312px;background:#BC0020; float:left;">
<a href="http://siteadmin.taobao.com/module/#" target="_blank">
<img  style="vertical-align:top;border:#DDD 1px solid; width:310px; height:310px;" src="http://g.hiphotos.baidu.com/album/w%3D2048/sign=4106f3c3d000baa1ba2c40bb7328b812/0e2442a7d933c8950f78a654d01373f08202009e.jpg">
</a>
</div>

<div style="height:312px; width:312px; background:#BC0020; float:left;">
<a href="http://siteadmin.taobao.com/module/#" target="_blank">
<img  style="margin:0px 0px -4px 0px;border:#DDD 1px solid; width:310px; height:310px;" src="http://g.hiphotos.baidu.com/album/w%3D2048/sign=4106f3c3d000baa1ba2c40bb7328b812/0e2442a7d933c8950f78a654d01373f08202009e.jpg">
</a>
</div>