刺客 » block http://blog.cike.org 刘益民中文网 Mon, 03 May 2010 06:23:27 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 IE8B1块状元素引起的链接BUG http://blog.cike.org/2008/ie8blockhover/ http://blog.cike.org/2008/ie8blockhover/#comments Sun, 24 Aug 2008 17:22:24 +0000 cike http://temp.cike.org/2008/08/ie8b1%e5%9d%97%e7%8a%b6%e5%85%83%e7%b4%a0%e5%bc%95%e8%b5%b7%e7%9a%84%e9%93%be%e6%8e%a5bug/ 继上篇发现IE8高度上的问题后，又发现了另一个问题

仅在IE8中，鼠标在如图蓝色区域内无法触发a:hover效果，触发点变在上下两条border上，我第一遇到，暂定为BUG

]]> 继上篇发现IE8高度上的问题后，又发现了另一个问题

1
2
3
4
5
6
7
8

li{text-align:right; height:25px; overflow:hidden}
li a{float:left; display:block; width:435px; text-align:left; border:1px solid red}
li a:……伪类略
XHTML:
<ul>
<li href=""><a>……</a>0812</li>
……
</ul>

仅在IE8中，鼠标在如图蓝色区域内无法触发a:hover效果，触发点变在上下两条border上，我第一遇到，暂定为BUG

BUG在线演示：http://cike.org/demo/html-css/ie8blockhover.asp 鼠标移至链接所在行的上下边框上看到hover效果

发现当把链接设置为block，链接的上级（包括父、爷……）只要含有block属性，a:hover效果无法正常触发

暂用a{display:inline-bock}解决

]]> http://blog.cike.org/2008/ie8blockhover/feed/ 0 使DIV图片之间不产生空白距离 http://blog.cike.org/2007/img-crevice/ http://blog.cike.org/2007/img-crevice/#comments Fri, 21 Sep 2007 14:04:24 +0000 cike http://temp.cike.org/2007/09/%e4%bd%bfdiv%e5%9b%be%e7%89%87%e4%b9%8b%e9%97%b4%e4%b8%8d%e4%ba%a7%e7%94%9f%e7%a9%ba%e7%99%bd%e8%b7%9d%e7%a6%bb/ 在中国杨树网设计杨树图片时遇到一个问题，正好在ajaxbbs.net上看到作者提到，抄过来收藏，这个问题是这样的，无论怎么设置边框，在图片的下方都会有一空隙，我的是div包一个IMG

]]> 在中国杨树网设计杨树图片时遇到一个问题，正好在ajaxbbs.net上看到作者提到，抄过来收藏，这个问题是这样的，无论怎么设置边框，在图片的下方都会有一空隙，我的是div包一个IMG

在无忧上看到一个网友问这个问题，偶也比较感兴趣，楼主代码是这样写的：

<div style=”width:240px;height:315px;line-height:100%;”>
<img src=”1.gif” border=”0″ height=”56″ width=”240″ />
<img src=”1.gif” border=”0″ height=”56″ width=”240″ />
<img src=”1.gif” border=”0″ height=”56″ width=”240″ />
<img src=”1.gif” border=”0″ height=”56″ width=”240″ />
</div>

这样看到的效果就是每个图片之间有小段空白。

有朋友贴出解决代码如下：

<div style=”width:240px;height:315px;line-height:100%;”>
<img src=”1.gif” border=”0″ height=”56″ width=”240″ /><img src=”1.gif” border=”0″ height=”56″ width=”240″ /><img src=”1.gif” border=”0″ height=”56″ width=”240″ /><img src=”1.gif” border=”0″ height=”56″ width=”240″ /><img src=”1.gif” border=”0″ height=”56″ width=”240″ /></div>

即删除每个<img>标记之间的换行符，将所有标记连接在一起，这样问题解决了，但降低了代码的可读性,显然不是一种完美的解决办法。

最后hbjswj大哥给出了一种比较好的办法.全部代码如下：

<style>
img {float:left;} /*注意这个地方*/
</style>
<div style=”width:240px; height:315px; line-height:100%;”>
<img src=”1.gif” border=”0″ height=”56″ width=”240″ />
<img src=”1.gif” border=”0″ height=”56″ width=”240″ />
<img src=”1.gif” border=”0″ height=”56″ width=”240″ />
<img src=”1.gif” border=”0″ height=”56″ width=”240″ />
<img src=”1.gif” border=”0″ height=”56″ width=”240″ />
</div>

为每个img增加了float:left，这就比较完美的解决了这个问题

20080831更新的：以上是07年9月实践中查阅资料总结，针对本例现在再补两种做法

img{vertical-align:bottom}
或
img{display:block}
]]> http://blog.cike.org/2007/img-crevice/feed/ 1