注:以下描述只适用于 IE 的 Standard 模式,未在 Quriks 模式下测试过。
min-width / min-height
IE6 不支持这两个属性,但它会把 width / height 视为 min-width / min-height
因此,跨浏览器的实现方式是这样的:
_width: x;
min-width: x;
inline-block
IE6/7 不支持 display: inline-block;。要让它们实现此效果分两种情况:
一、行内元素
display: inline-block;
或 *zoom: 1;
只要对行内元素触发 hasLayout,即可实现 inline-block,上面两句都能达到这个效果。一般用前面那句。
注意:这种情况下,若当前元素的 margin 的单位是 em,那么它参照的是父元素设置的字体大小。原因不明。
<style>
html, body { padding: 0; margin: 0; }
#wrap { font-size: 100px; }
a {
border: 1px solid #ccc;
display: inline-block;
font-size: 12px;
margin: 1em;
padding: 1em;
}
</style>
<div id="wrap">
<a href="">abc</a>
<a href="">def</a>
</div>
二、块状元素
让块状元素实现 inline-block,需要在触发 hasLayout 之后,将其设为 display: inline;
两种做法:
div{ display: inline-block;} div{ *display: inline;}
注意,两句必须放在两个声明中div{ display: inline-block; /*for other*/ *display: inline; *zoom: 1; /*for ie*/ }
这样的好处是不必放在两个声明里了,但多了一条语句。个人推荐这一个。
而且这个方法实际对行内和块状元素都有效了,比较便于重用。
滚动条与resize
在现代浏览器里,全局的 resize 事件只在窗口大小变化时被触发
但在 IE6/7/8 里,body 元素大小的变更也会触发这一事件:
<div id="content">abc</div>
<script>
window.onresize = function() { alert('resized'); };
setTimeout(function() {
document.getElementById('content').style.height = '300px';
}, 500);
</script>
因此,有时窗口大小只改变一次,却会触发两次 resize 事件
有的情况下,甚至会导致死循环(即:在响应 resize 事件时,因为修改文档内容/样式,再次触发了 resize 事件)
解决办法,用这种方式监听 resize 事件:
var currheight, currwidth;
window.onresize = function() {
if(currheight != document.documentElement.clientHeight
&& currwidth != document.documentElement.clientWidth) {
alert('resized');
}
currheight = document.documentElement.clientHeight;
currwidth = document.documentElement.clientWidth;
};
P.S. 思路来自 这里,原文中的办法有问题,在这做了一点改进
行内元素 border-top/bottom 无效
在 IE6/7 中,如果行内元素的上/下方与 body 之间没有被其他东西分隔开,那么它们的上、下边框会被"吞掉"
<style>span { border: 1px solid #f00; }</style>
<span>abc</span>
<span>123</span>
此问题的具体表现如下:
- 无论边框宽度是多少(1px、100px),都会被吞掉
- 若元素中只存在全角字符(如 汉字),那么上边框会剩下 1px 不被吞
- 若 font-size 不是默认的 16px,有部分边框可能不被吞(未找到具体规律)
- 使部分或整个边框不被吞的方法:
- 推荐 通过设置 zoom: 1; 或 display: inline-block; 让行内元素 hasLayout
- 给 body 元素设置 padding 或给任意祖先元素(不包括 body)设置 margin / padding / border
总体上,设置这些数值能让边框的一部分留下来不被吞。
至于留下来的部分是多宽,因为涉及到多层父元素与 body 间各部分 margin / padding 的叠加与抵消,比较复杂,就不一一列出了。 - 加大行内元素的 line-height,让其大于 font-size (至于要大多少才能使整个边框不被吞,没有找到规律)
- 在它们上面或下面放置一个有高度的元素(仅对放置了这个元素的那面有效)