By Edgar Hoo @ August 18, 2009 – 19:45
昨天用IE 8测试某页面时，发现点击显现隐藏的元素后其浮于其他元素之上，也即其他元素没有相应的腾出空间来容纳，其他浏览器没有出现些现象，包括IE 7。
现作简易页面记录此问题。代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Edgar Hoo Lab</title>
<style type="text/css">
#box{display:inline-block;}
#hide{display:none;padding:20px;;border:3px solid #f00;}
#line{background:#ccc;}
</style>
<script type="text/javascript">
window.onload = function() {
var btn = document.getElementById("btn");
var hd = document.getElementById("hide");
btn.onclick = function() {
hd.style.display = hd.style.display != 'block' ? 'block' : 'none';
};
};
</script>
</head>
<body>
<div id="box">
<div>
<div><button id="btn">display</button></div>
<div id="hide">hide</div>
</div>
</div>
<div id="line">line</div>
</body>
</html>
经测试发现，若要产生此现象，DTD必须存在，按钮的父级div元素也必须存在。
Google Chrome下点击按钮后截图，此为期望显示。
IE 8下点击按钮后截图。
测试地址：IE8下显示的隐藏元素溢出inline-block元素
@ Aug. 18, 2009 SH
---------------这是分割线---------------
Flickr: 1 / 2
By Edgar Hoo @ July 30, 2009 – 15:21
昨日在优化某页面的时候，发现自以为运用绝对定位将元素脱离文档流可以让其自定义宽度而不无需担心其破坏布局却在IE系浏览器下突然消失不可见，在IE Developer Toolbar修改任一属性（包括background、color等）便可使其现于视线之中。
现作简易页面记录此问题。代码如下：
<html>
<head>
<title>IE下clear元素的height导致absolute元素不可见 - Edgar Hoo Lab</title>
<style type="text/css">
#box{position:relative;height:110px;}
#float-left{float:left;margin:20px;}
#absolute{position:absolute;right:10px;top:10px;}
#clear{clear:both;height:30px;background:#f00;}
</style>
</head>
<body>
<div id="box">
<div id="float-left">float-left</div>
<div id="absolute">absolute</div>
<div id="clear">clear</div>
</div>
</body>
</html>
IE 8下截图，IE 6/7存在同样问题。
Google Chrome下截图，Mozilla Firefox、Safari、Opera均能正常显示。
如果去掉clear元素的height属性，那么IE系能够正常的显示。
当然，将clear元素同absolute元素换下位置，先消除掉浮动，IE系也能够正常显示。
测试地址：IE下clear元素的height导致absolute元素不可见
@ Jul. 30, 2009 SH
------这是分割线------
Flickr: 1 / 2
Tagged CSS, IE
|
214 views
By Edgar Hoo @ November 1, 2008 – 18:52
今天早上偶然在他处的IE 7上打开EdgarHoo.com ，居然发现侧栏下部出现问题，当时不及细看。
回宿舍后，用IE 8打开，果然存在问题：
不说Feeds、Blogroll之前出现两个蓝点外，Meta框及版权信息、统计图标都跑到白色区域外了。
而在IE 8打开其他正文处内容长度短于Sidebar栏的时候，更离谱，Meta框以下，全跑到正文处去了。
可之前没对Blue Sandbox个性化之前，电脑前有的浏览器都经过测试，没有问题的。难道是个性化的过程中出现的问题？
昨天用Opera打开多次，也会发现问题，再次打开，没有问题：
在FF也没问题，这更奇怪了。
查看IE 8下的源代码，发现莫名其妙的两个问号：
在Opera查看时没有。这两个问号怎么来的，会不会是这两个问号的缘故呢？
仔细查看源代码、主题代码，没发现什么问题，标签也都闭合了。重新上传Blue Sandbox，启用，各浏览器表现良好，再次证明问题出在个性化之后。
正在毫无对策之时，无意中给自定义widget的Search框里的代码添加修改了几个标签，自己电脑上毫无反应，嫌校园网速度慢，换成宽带后，居然在IE 8显示正常了，难道是速度的问题？可早上的那个地方，网速很快的呀。转到Jaking的电脑去打开试试，他在用校园网，虽速度慢些，用IE 7打开，也正常。起初怀疑莫非我看错了不成。
看来是添加修改的几个标签生效了。Search框先前的代码：
<li> </li>
<form action="http://www.google.com/cse" id="cse-search-box">
......
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=zh-Hans"></script>
<li> </li>
前后两行的<li> </li>是空行，如果用<p> </p>的话，会显得比较宽。
添加修改标签后：
<ul>
<li>
<form action="http://www.google.com/cse" id="cse-search-box">
......
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=zh-Hans"></script>
</li>
</ul>
Sidebar的标签嵌套层次为:
<ul>
<li>
<ul>
<li>
</li>
</ul>
</li>
<ul>
每个widget都由第一层的<li></li>组成，而内层的<li></li>是每个链接。
按这个差错，表明IE必修按照这层次来嵌套，要么不要第二层的<ul><li></li></ul>，要么严格圈套，不能<li><li></li></li>这么嵌套，而Opera、FF能区分。
虽目前解决了在IE下的显示问题，但那两个问号仍在，不知怎么回事。其他浏览器下查看却没见到这可恶的问号。
@ Nov. 1, 2008 SCUTA
-------这是分割线--------
Flickr 1 / 2