Sep
18上一篇日志中写了 IE6 对 float 元素显示不正常的问题，现在找到了一个解决办法。
测试了很多次，发现跟 margin 和 padding 没有直接的关系，本质的问题根源在于，包含 float 元素的外层 div，没有设置足够的宽度和高度，也就是说，这个容器没有足够的空间用来显示内部所有的 float 元素。
margin 和 padding 只是一个间接原因，如果没有内外边距，可能外层 div 刚好可以容纳内部的 float。
加上边距后，每个 float 占用的空间就变大了，首先带来的问题是 div 的宽度不够，那么，愚蠢的 IE6 就会产生莫名其妙的问题，反映给用户的现象就是出现鬼影。
解决方案：准确计算内部 float 元素加在一起占用的宽高，确保外层 div 在 css 中明确指定了具体的 width 和 height 像素值，问题不会再出现。
可悲啊，95% 以上的桌面浏览器被这样愚蠢、垃圾的 IE6 霸占着！！！
Sep
18IE6 浏览器对 float 属性的元素显示不太正常，经常遇到的情况是，打开页面，发现某个区域的内容是空的，什么都不显示，但鼠标移动到那个区域，或者附近的一些区域时，那个空的区域立刻显示出原有的内容。
另一个 case 可以称之为“鬼影”，现象是，某串文字，会在 2 个位置同时显示，如果有 hightlight 效果，那么任凭你把光标放到二者任意一个上面，另一串文字也会立刻高亮。
以前对这个问题很抓狂，也没有总结出一个很好的解决方法。
今天又碰到类似的问题，查了一下 Google，有人给出一个结论，当某个元素有 float 属性时，再给他添加 padding 或 margin 等属性，在 IE6 下可能会出现显示问题。
具体的解决方法我总结一下会发布到 Blog 上。
这篇文字算是一个 bug 记录吧。
本为讲述了如何解决在IE6下动态创建的DIV等Element会被Select等Form控件覆盖的问题。
下拉框，即html的SELECT元素，.net设计时的DropDownList，是html中的windowed element，尤其ie6之后，几乎是唯一的windowed element（还有popup等少量极少用的的）。
普通的元素，textbox, div, table……这些，属于windowless element，它们之间互相遮盖的情况由z-index决定，在它们之上，是SELECT这些windowed element。所以一般情况下div、table等不能遮盖select。
这个问题广泛存在于各种弹出式控件的使用之中，比如日历控件等。
如果要显示div，以前的做法是，动态的，在显示的时候，让div区域的select不可见，div消失的时候，再恢复这些select元素。这种做法比较奇怪，因为它严格上并不是“遮盖”了select，而是，让她整个消失了，如果calendar弹出元素只是应该遮盖select元素的一部分，但select却整个不见，用户也许会觉得奇怪；做起来也麻烦，要用js逐一判断各select的位置。
ie5.5之后，有一个新的小技巧，称之为“iframe shim”（iframe加塞:p），可以真正的“遮盖”select元素。
它利用了一种特殊的元素：iframe。在ie5.5之前，iframe也是windowed element，但从5.5开始，iframe就是普通的windowless element了，可是，虽然是windowless element，iframe却可以盖住select。这种做法的原理就是：放一个iframe与你要显示的东西（比如说一个div）同样大小、位置，并设置z-index使得iframe在此DIV之下；这样，iframe遮盖了select，同时，iframe又在要显示的div的下面，div就露出来了。
限制：仅适用于ie5.5及以后版本。
参考文章链接：
http://dotnetjunkies.com/WebLog/jking/archive/2003/07/21/488.aspx
示例程序代码：
//html.select.hack.iframe shim.htm
<html>
<head>
<script>
function DivSetVisible(state)
{
var DivRef = document.getElementById(’PopupDiv’);
var IfrRef = document.getElementById(’DivShim’);
if(state)
{
DivRef.style.display = “block”;
IfrRef.style.width = DivRef.offsetWidth;
IfrRef.style.height = DivRef.offsetHeight;
IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = DivRef.style.zIndex - 1;
IfrRef.style.display = “block”;
}
else
{
DivRef.style.display = “none”;
IfrRef.style.display = “none”;
}
}
</script>
</head>
<body background=”/A-A-A/2005/07/17/20050717095153122477_1.gif”>
<form>
<select>
<option>A Select Box is Born ….</option>
</select>
</form>
<div
id=”PopupDiv”
style=”position:absolute;font:italic normal bolder 12pt Arial; top:25px; left:50px; padding:4px; display:none; color:#ffff00; z-index:100″>
…. and a DIV can cover it up<br>through the help of an IFRAME.
</div>
<iframe
id=”DivShim”
src=”javascript:false;”
scrolling=”no”
frameborder=”0″
style=”position:absolute; top:0px; left:0px; display:none;filter=progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);”>
</iframe>
<br>
<br>
<a href=”#” onclick=”DivSetVisible(true)”>Click to show DIV.</a>
<br>
<br>
<a href=”#” onclick=”DivSetVisible(false)”>Click to hide DIV.</a>
</body>
</html>
转自：http://www.dedecms.com/plus/view.php?aid=28759
Sep
12本为讲述了如何解决在IE6下动态创建的DIV等Element会被Select等Form控件覆盖的问题。
It was about 1 year ago that Coalesys released the first WebMenu 2.0 beta. At that time we began demonstrating a technique for overlaying windowed controls in Internet Explorer.
In case you don’t already know, windowed controls in IE will always cover DHTML layers. That means if you have a DIV that pops up or floats on the page and it intersects with a windowed control (such as the common SELECT box), the windowed control will obscure the DIV, no matter what zIndex you have set for each element. More information is available in this Microsoft KB article.
The initial solution adopted by most developers who cared about such things (including ourselves) was to dynamically hide windowed controls when it was necessary to display the DIV over them. Far from being a perfect solution, it was better than the alternative of doing nothing at all.
It did have one very frustrating aspect. People who evaluated WebMenu didn’t understand why their select boxes would disappear. And we are talking much more than just ASP.NET developers, as we produce WebMenu for ASP, as well as general web development. It seemed like every day we received a support question, “I found a bug in WebMenu. The select boxes are disappearing”. And although we did provide the ability to turn the feature off, nobody really bothered once they understood the nature of the issue.
Then, as luck would have it, a developer called who wanted to use our product for it’s broad set of features, but who absolutely needed to have the menu appear over some windowed objects. What was unique about his call was that he had the idea for a solution and shared it with us. While we didn’t use the full scope of his idea, we were able to take from it what we needed to cover windowed controls in IE 5.5. So, enough yacking. You probably surfed here to read about the solution. And here it is:
IFRAME
The IFRAME control has a unique nature in IE 5.5. It can exist in both the zIndex of windowed controls and the zIndex of regular HTML elements. Simply put, you can shim an IFRAME under your DIV. The IFRAME will block out the windowed control.
Set up your IFRAME:
The src attribute is set with a useless JavaScript statement so that the IFRAME does not try to load a page (which you won’t notice it doing, but it will be the cause for tripping the “Unsecured Items” message if you use it on a HTTPS page).
You can code your IFRAME as a static element on the page, or if you are going to be using more than one of them you may want to dynamically create them as required. The insertAdjacentHTML() method is good for that.
Now, all that is needed is to size the IFRAME according to the dimensions of your DIV, position it, place it one layer beneath the DIV in the zIndex order and make it “visible”. The IFRAME’s style object will allow you to do these tasks:
iframe.style.top
iframe.style.left
iframe.style.width
iframe.style.height
iframe.style.zIndex
iframe.style.display
What about transparency?
If the DIV has transparent areas, you’ll want those areas to punch through the IFRAME to the page background. There are two ways you can make an IFRAME transparent. The one that works for this situation is to set the style object’s filter property:
iframe.style.filter=’progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)’;
This in effect makes the entire IFRAME transparent, but it will still block out the windowed controls. The other technique, which uses the IFRAME element’s ALLOWTRANSPARENCY attribute, actually pertains to making the interior page background of the IFRAME transparent, so that any content inside the IFRAME can have transparency. However, this mode changes the nature of the IFRAME and it no longer serves our purpose for blocking out windowed controls.
What about IE versions prior to 5.5?
The IFRAME’s unique nature surfaced only in IE 5.5. Prior to this, IFRAMEs where straight windowed controls themselves. That means they could get above other windowed controls, but no HTML element (like the DIV) could be seen above them. There is a solution, but it involves a lot of effort to get working. You can dynamically write the content of your DIV into the IFRAME itself, get it sized appropriately based on the dimensions of the original DIV, and then just move it around as your absolutely positioned element. There are a couple of caveats:
1. The IFRAME, like any frame, has it’s own JavaScript environment. If you want DHTML actions in the IFRAME to integrate with the JavaScript functions in your main page, you will have to bridge the gap between the two JavaScript environments.
2. Mouse events, such as OnMouseOut and OnMouseOver, can be called out of logical order when the mouse moves between frames in IE 4 and 5. This problem is compounded when you are using timers and need to precisely control their execution and cancellation via mouse events.
Our original WebMenu 2.0 beta used this technique successfully for IE 4 and 5, but in looking forward to adding new features to the product, we could see that this solution “over-worked the plumbing” to a great extent. The “shim” technique compatible only with IE 5.5 had zero architectural impact and was chosen for this reason. You can still hide windowed elements in earlier browsers as an acceptable solution.
posted on Monday, July 21, 2003 9:30 AM by jking
Sep
11最近在做一些UT的工作，写一些HTML和CSS，又遇到了一直很头疼的浏览器兼容问题。
主要就是让人讨厌的IE6，总是需要进行很多特殊的处理。
遇到表格类型的HTML区域，我一直觉得用table是最合适的，解决局部的单层表格，table是最方便的，HTML语言加入table这个标签的初衷就在这里。
不过因应用需要，我这回必须要用div实现table的布局，只能硬着头皮搞了。
对表格区域，我用ul标签，用li作为每行的容器。
在每个li标签中，用div作为列单元的容器。
这会遇到几个问题，同时也有一些优点吧：
