当前位置: 网站建设 > 网页设计 > 建站经验 >

解决 IE6 下 img 多余 5 个像素的空白

时间:2013-03-02 04:14来源:未知 作者:admin 点击:

标签:解决 IE6 下 img 多余 5 个像素的空白 空白(3)多余(4)font-si(1)IE6(28)像素(2)img(3)解决(48)设置(27)
设置 ul 的 font-size:0; ul { width:280px; } ul { width:280px; font-size:0, 视频网站架构经验 ; } 很显明地能够看到 IE 中,li 的表现高度,并非咱们设定的 57px,而是比其要高,这是由于 img 下面多出了 5px 的空白。 ul { width:280px; font-size:0; } CSS Code: 解决方法 二 IE6 下的非正常表现: 其中 temp.jpg 尺寸为 27757 ul li { display:bl
解决 IE6 下 img 多余 5 个像素的空白》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/030234QR013.htm

  设置 ul 的 font-size:0;

  ul { width:280px; }

  ul { width:280px; font-size:0,视频网站架构经验; }

  很显明地能够看到 IE 中,li 的表现高度,并非咱们设定的 57px,而是比其要高,这是由于 img 下面多出了 5px 的空白。

 

  ul { width:280px; font-size:0; }

  CSS Code:

  解决方法 二

  IE6 下的非正常表现:

  其中 temp.jpg 尺寸为 277×57

  ul li { display:block; height:57px; width:277px; }

  设置 img 的 vertical-align: bottom;

<ul>
  <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>
  <li><,视觉设计案例 如何设计与众不同的天气应用;a href="#"><img src="img/temp.jpg" alt="" /></a></li>
  <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>,衡量商业设计好坏的三个考量方面;
 ,行为请求按钮设计技巧 行为请求按钮的6大要素; <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>
</ul>

  ul { width:280px; }

  Firefox 下的畸形表示:

--> [网站建设之]解决 IE6 下 img 过剩 5 个像素的空白

最近的实际中,越来越感到 li 标签中包括 a img 标签的时候会比拟麻烦,须要留神。当然,问题仍是判若两人的呈现在 IE 下。以下为其中一例:

  ul { width:280px; font-size:0; }

 

Tag:像素   空缺   解决     像素   空白   解决    

  img { vertical-align:bottom; }

  ul li { display:block; height:57px; width:277px; }

  解决方法 四 我以为是最傻的

  设置 img 的 margin-bottom: -5px;

  解决办法 三

  img { margin-bottom:-5px; }

 

  解决方式 一

  ul li { display:block; height:57px; width:277px; }

  使 li 浮动,并设置 img 为块级元素

  ul li { display:block; float:left; height:57px; width:277px,行业门户网站产品设计应遵循哪些原则; }

  img { display:block; }

  ul li { display:block; height:57px; width:277px; }


(责任编辑:网站建设)
解决 IE6 下 img 多余 5 个像素的空白相关文章
上一篇:视频网站架构经验 下一篇:解决Firefox下outerHTML不支持问题
回到顶部