如何为IE10编写CSS Hack修复ul li元素的显示异常问题

数据老陈

2026-5-21

修复IE10及以下版本中ul/li的布局异常问题

嘿，我之前也碰到过旧IE版本里浮动元素的布局坑，咱们一步步来解决这个问题～

首先得明确：IE10及以下对浮动元素的排版逻辑和IE11/现代浏览器有差异，当父容器.util设了float:right后，子元素ul li的float:left很可能因为浏览器默认样式、浮动计算规则的不同，出现换行、对齐偏移或者间距错乱的情况。

下面是针对性的修复方案，覆盖IE10及更低版本：

方案1：专门针对IE10的媒体查询Hack

IE10支持专属的媒体查询规则，我们可以用它单独编写修复样式，不会影响其他浏览器：

/* 原有基础样式 */
.util {
    float:right; 
    margin:0 auto; 
    border:0px solid red; 
    margin-top:60px;
}
.util ul li {
    float:left;
}

/* 仅对IE10生效的修复样式 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .util ul {
        padding-left: 0; /* 清除IE10默认的ul左内边距 */
        margin: 0;
        white-space: nowrap; /* 强制li在同一行排列，避免换行 */
    }
    .util ul li {
        display: inline-block; /* 用inline-block替代float，规避IE10的浮动计算bug */
        float: none;
    }
}

方案2：兼容IE9及以下版本的属性Hack

如果还要覆盖IE9、IE8甚至IE6，可以在原有样式上添加旧IE专属的属性前缀：

.util ul {
    padding-left: 0;
    margin: 0;
    *padding-left: 0; /* 仅IE7-8生效 */
    _padding-left: 0; /* 仅IE6生效 */
}
.util ul li {
    float:left;
    *display: inline; /* IE7-8：修复浮动元素的双倍margin问题 */
    _display: inline; /* IE6生效 */
}