如何调整CSS在IE 6中正确显示？

Question

我有以下 HTML+CSS 可能会在少数使用 IE 6 作为 Web 浏览器的旧 Windows XP 机器上显示。在较新的浏览器上，它应该如下所示：

但是 IE 6 让它看起来像这样：

所以我想知道我是否可以做些什么来尝试为 IE 6 修复此问题？

使用的图像是这样的：

html:

<span id="lbl01">User Commands:</span>
<div class="divSmBtns">
<a href="#" id="idBtn" draggable="false" class="smtbBtnCopy smtbBtn" title="whatever"></a>
</div>

Css:

.divSmBtns{
    margin: -10px 10px 0px 8px;
    padding: 0px;
    display: inline-table;
}
.smtbBtnCopy{
    background-image: url(copy.gif);
}
.smtbBtn{
    width: 12px;
    height: 10px;
    margin: 0px;
    padding: 1px;
    background-size: 6px;
    background-repeat: no-repeat;
    background-color: transparent;
    border: 1px solid transparent;
    display: inline-block;
    background-position: center center;
    cursor: pointer;
    box-sizing: border-box;
    outline: none;
}
.smtbBtn:hover{
    border: 1px solid #ccc;
}
.smtbBtn:active{
    background-size: 5px;
}

Answer 1

为了支持 IE6，您需要对标记做出一些妥协并使其保持简单。

正如我在评论中所说，两个问题。

display: inline-table。使用 display: inline;
background-size。使用 img 而不是背景图片。

一个非常简单的解决方案是删除包裹 a 的 div，而是使用 a 包裹 img。像这样：

<span id="...">User Commands:</span>
<a href="#" id="..." class="smtbBtn " title="...">
    <img src='...' alt='...' />
</a>

然后，将该图像用于悬停交互：

.smtbBtn { vertical-align: middle; }
.smtbBtn img { height: 14px; border: 1px solid transparent; }
.smtbBtn:hover img, .smtbBtn:active img { 
    border: 1px solid #f00; 
}

这将适用于所有浏览器，包括现代浏览器以及回到 IE5 的 IE。

演示 Fiddle：https://jsfiddle.net/abhitalks/mcgLkdc9/6/embedded/result/

片段：

.smtbBtn { vertical-align: middle; }
.smtbBtn img { height: 14px; border: 1px solid transparent; }
.smtbBtn:hover img, .smtbBtn:active img { 
    border: 1px solid #f00; 
}

<span id="lbl01">User Commands:</span>
<a href="#" id="idBtn" draggable="false" class="smtbBtnCopy smtbBtn" title="Copy">
    <img src='http://i.stack.imgur.com/6cALN.gif' alt='' />
</a>

编辑：

正如指出的那样，IE6 将不支持 border-color 的 transparent，您将不得不求助于 hack 或条件注释（如其他答案中所建议的那样).

Hack：您可以在属性前加上 _（下划线），这只会被识别被 IE6 忽略，被其他浏览器忽略。类似地，带有 *（星号）的前缀将仅被 IE7 识别。

CSS:

.smtbBtn img { height: 14px; border: 1px solid transparent; }
.smtbBtn img { _border-color: pink; _filter: chroma(color=pink); }

Fiddle 2: https://jsfiddle.net/abhitalks/mcgLkdc9/8/embedded/result/

条件注释：您可以使用条件注释来注入 HTML 即在您的情况下 img带有针对这些样式的特定 class 的标签。请记住，条件注释用于 HTML 而不是 CSS.

标记：

<a href="#" id="idBtn" draggable="false" class="smtbBtnCopy smtbBtn" title="Copy">
    <!--[if IE 6]>
        <img src='http://i.stack.imgur.com/6cALN.gif' class='ie6img' alt='' />
    <![endif]-->
    <!--[if gte IE 7]>
        <img src='http://i.stack.imgur.com/6cALN.gif' alt='' />
    <![endif]-->
    <!--[if !(IE)]><!-->
        <img src='http://i.stack.imgur.com/6cALN.gif' alt='' />
    <!--<![endif]-->
</a>

CSS:

.smtbBtn img { height: 14px; border: 1px solid transparent; }
.ie6img {
    border-color: pink; filter: chroma(color=pink);
}

Fiddle3:https://jsfiddle.net/abhitalks/a9f80cqf/4/embedded/result/

注：以上两种方法我没有在IE6下测试过。我在 IE11 中使用开发人员工具仿真。这意味着，您必须根据自己的经验进行调整。

如何调整CSS在IE 6中正确显示？

How to adjust CSS to display correctly in IE 6?

html

css

internet-explorer

internet-explorer-6

编辑：