Home  >  Article  >  Web Front-end  >  Someone help me look at the code_html/css_WEB-ITnose

Someone help me look at the code_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:23:041138browse

8db58a9116e0ad122da8914faef58bf4
1cf9a7c7fb850aaa11734ad02498b5fe
e65ad843eb12a5ec606ff002b6f6f14a
5db79b134e9f6b82c0b36e0489ee08ed
16b28748ea4df4d9c2150843fecfba68

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


回复讨论(解决方案)

单独这段代码看是没什么问题的,可能是其它样式影响 a,div产生边框

我就是这段代码直接保存为html的,就有这个问题

红线是你div的背景引起的

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

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

你把你的a的display:block去掉

8db58a9116e0ad122da8914faef58bf4
e661e2fdf60fbedc77bea79bfdd6956c
5754a249788372d223904aeaadfac0ae
5db79b134e9f6b82c0b36e0489ee08ed
16b28748ea4df4d9c2150843fecfba68

你试试

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

去掉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>

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

你用的什么浏览器?

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

u011523992 你试过吗,我还是不行,用火狐没有,用IE和360的都有。代码改的和你的一样了。

d4c491082e63c0efc46d8bd0b28520ec
e661e2fdf60fbedc77bea79bfdd6956c
467932129c1dda3d71a8162364b15653
5db79b134e9f6b82c0b36e0489ee08ed
16b28748ea4df4d9c2150843fecfba68

你用的IE版本是多少?是不是图片的原因呀

IE10.    我用的是22寸显示器,页面默认放大到150%,有红线。如果改变一下放到到100%,125%,200%都没有红线。用360浏览器也有这个问题。这个是什么缘故呢。

换了图片也是一样

明白了是不是像素的问题,缩放的时候可能算出来像素不是整数,就四舍五入了,就造成偏差了

把图片格式换成png格式的试试,png在放大和缩小的时候是不会失真的

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

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

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

5db79b134e9f6b82c0b36e0489ee08ed
16b28748ea4df4d9c2150843fecfba68

--->
5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68

这是什么写法?

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

你代码写错了,图片大小设定不起作用,默认原大小显示。

原来的:
【width="310px" height="310px"】

改为
【width="310" height="310"】

这样就没问题了。

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

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

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

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

上网搜了一下,虽然没有具体解释(原因),但是其解决方法还是可以用的~下面代码中,第一个是楼主的问题的那种情况,第二个是在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>

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn