如何为 css 代码应用 ie10 hack ul li 元素的错误显示答案

【问题标题】：how to apply ie10 hack ul li element's wrong display for the css code如何为 css 代码应用 ie10 hack ul li 元素的错误显示
【发布时间】：2018-03-26 21:35:36
【问题描述】：

我在 css ie10 hack 中遇到问题。

好风景就是这个。（在 IE11 上）

Good view on IE11

糟糕的看法是这样的。（IE10及以下）

Good view on IE10

CSS 代码是

.util {float:right;边距：0 自动；边框：0px 纯红色；边距顶部：60px;}

.util ul li {float:left;}

而HTML代码是

<div class="util">
                    <ul>
                            <li><a href="/login.php"><img src="/img/new/snb_01.png"></a></li>
                            <li><a href="/register.php"><img src="/img/new/snb_02.png"></a></li>
                            <li><a href="/subpage.php?p=m36"><img src="/img/new/snb_03.png"></a></li>
                            <li><a href="/board.php?bo_table=m31"><img src="/img/new/snb_04.png"></a></li>
                            <li><a href="/board.php?bo_table=m72"><img src="/img/new/snb_06.png"></a></li>
                    </ul>
            </div>

我已尝试在搜索网络上寻找解决方案。我添加了代码，

.util li {display:inline;}

但是没有用..

请告诉我，如何将它应用到 ie10-hack 并正确显示。

【问题讨论】：

尝试将display:block添加到.util

标签： html css internet-explorer-10

【解决方案1】：

我建议将display: inline-block 添加到.util。如果这不能解决问题，您甚至可以将<ul> 包装在<table> 元素中。一个很好的例子可以在 CSS 技巧链接上找到 - centering list items horiztonally

【讨论】：

【解决方案2】：

首先，您应该始终避免浏览器黑客攻击，原因如下：

可能无法进行 CSS 验证
您的 CSS 变得更加复杂
您的 CSS 可能无法适应未来
很少需要它们

更多信息Why avoid CSS Browser Hack

即使你想要 Hack，那么 Browser hacks 拥有所有浏览器所需的所有 hack。

对于 IE10：

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 // Your CSS
}

【讨论】：