老版本 IE 下的 CSS 问题/技巧整理

智码溯光者
• 阅读 3183

注:以下描述只适用于 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>


老版本 IE 下的 CSS 问题/技巧整理

二、块状元素

让块状元素实现 inline-block,需要在触发 hasLayout 之后,将其设为 display: inline;
两种做法:

  1. div{ display: inline-block;} div{ *display: inline;}
    注意,两句必须放在两个声明中

  2. 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>

老版本 IE 下的 CSS 问题/技巧整理

此问题的具体表现如下:

  • 无论边框宽度是多少(1px、100px),都会被吞掉
  • 若元素中只存在全角字符(如 汉字),那么上边框会剩下 1px 不被吞
  • 若 font-size 不是默认的 16px,有部分边框可能不被吞(未找到具体规律)
  • 使部分或整个边框不被吞的方法:

    1. 推荐 通过设置 zoom: 1; 或 display: inline-block; 让行内元素 hasLayout
    2. 给 body 元素设置 padding 或给任意祖先元素(不包括 body)设置 margin / padding / border

      总体上,设置这些数值能让边框的一部分留下来不被吞。

      至于留下来的部分是多宽,因为涉及到多层父元素与 body 间各部分 margin / padding 的叠加与抵消,比较复杂,就不一一列出了。
    3. 加大行内元素的 line-height,让其大于 font-size (至于要大多少才能使整个边框不被吞,没有找到规律)
    4. 在它们上面或下面放置一个有高度的元素(仅对放置了这个元素的那面有效)
点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Stella981 Stella981
3年前
CSS兼容性(IE和Firefox)技巧大全
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下。对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE影响CSS处理,作为W3C的标准,一定要加DOCTYPE声明。CSS技巧1.div的垂直居中问题verti
Stella981 Stella981
3年前
JS 苹果手机日期显示NaN问题
问题描述newDate("2019122910:30:00")在IOS下显示为NaN原因分析带的日期IOS下存在兼容问题解决方法字符串替换letdateStr"2019122910:30:00";datedateStr.repl
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Stella981 Stella981
3年前
SpringBoot整合Redis乱码原因及解决方案
问题描述:springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析:查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
3年前
IE7、IE8、IE9对min
问题:    IE7、IE8、IE9对minheight不识别,其他无问题解决:   box{width:100px;height:35px;}   htmlbodybox{width:auto;height:auto;width:100px;minheight:35px;} 实例:
Easter79 Easter79
3年前
SpringBoot整合Redis乱码原因及解决方案
问题描述:springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析:查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
Stella981 Stella981
3年前
Sass
嵌套规则(NestedRules)Sass允许将一套CSS样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器mainp{color:00ff00;width:97%;.redbox{