如何調整CSS以在IE 6中正確顯示？

Question

我有以下HTML + CSS，它們可能會在少數使用IE 6作為網絡瀏覽器的較舊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，您需要對標記做出一些折衷並保持簡單。

正如我在評論中所說，有兩個問題。

1. display: inline-table IE6不支持display: inline-table 。 使用display: inline;
2. IE6不支持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到IE5的所有瀏覽器）中都能很好地運行。

演示小提琴： 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或條件注釋（ 如其他答案所示 ）。

1. hack ：您可以在屬性前面加上_ （下划線），該屬性只能由IE6識別，而被其他瀏覽器忽略。 類似地，帶有* （星號）的前綴僅會被IE7識別。

CSS：

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

小提琴2： https : //jsfiddle.net/abhitalks/mcgLkdc9/8/embedded/result/

2. 條件注釋 ：您可以使用條件注釋來注入HTML，例如，在您的情況下為帶有這些樣式的特定類的img標簽。 請記住，條件注釋用於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);
}

小提琴3： https : //jsfiddle.net/abhitalks/a9f80cqf/4/embedded/result/

注意：我尚未在IE6中測試以上兩種方法。 我在IE11中使用開發人員工具仿真。 這意味着，您將不得不根據自己的經驗進行調整。