IE8：奇怪的邊框HTML按鈕元素

我有一個自定義背景（圖像+顏色）的按鈕元素，沒有邊界，除了2px邊框底部（和一堆其他屬性 - 代碼如下），它呈現相當在Firefox和IE8中有所不同。問題是，這是一個使用IE8作爲唯一瀏覽器的公司的工作，所以按鈕在IE8中呈現效果非常重要。IE8：奇怪的邊框HTML按鈕元素

下面是兩者之間的視覺比較：

comparison FF/IE8

我的問題在這裏是不關於填充區別（我期待成），但對怪異的邊界是可見IE8 另外到常規邊界（邊界 - 底部）。

任何人都可以向我解釋它來自哪裏以及如何擺脫它？
在此先感謝。

下面是HTML代碼：

<button class="btn" id="c_edit"> 
    <span>Annuler</span> 
</button>

這裏是CSS：

.btn { 
    display: inline-block; 
    margin: 0 0 7px 5px; 
    padding: 0; 
    color: #ddd; 
    font-size: 14px; 
    font-family: FrutigerLTStd55Roman, sans-serif; 
    text-decoration: none; 
    border: none; 
    border-bottom: 2px solid #222; 
    background-color: #999; 
    background-image: url('img/btn_bg.gif'); 
    background-position: 0 bottom; 
    background-repeat: repeat-x; 
    cursor: pointer; 
    transition: all .5s ease-out; 
} 
.btn span { 
    display: inline-block; 
    margin: 0; 
    padding: 8px 10px 6px 40px; 
    background-color: transparent; 
    background-position: 4px 0; 
    background-repeat: no-repeat; 
}

來源

2013-10-23 s427

等待。這應該做什麼？ 'border-bottom：2px solid＃222;' – mavrosxristoforos

你能確認你使用的文檔類型嗎？還要檢查IE8正在使用的渲染模式 - 使用F12打開開發工具來檢查它。 – Spudley

另外，你是否使用任何類型的CSS重置或normaliser？ – Spudley

每一個瀏覽器呈現文本不同，因爲你還沒有設置height但只有font-size，高度該按鈕將根據該瀏覽器的操作系統和渲染引擎而有所不同。

要解決這個問題，請在按鈕上使用與圖像相同的height，如果您想要裁剪，請選擇較小的按鈕。

來源

2013-10-23 09:56:14 SidOfc

謝謝你的回答，但問題不在於按鈕的高度... – s427

如果可能 - 你能否給我們提供一個jsFiddle來玩？然後，我們可以將您的問題鏈接到更新後的版本。 – SidOfc

IE8：奇怪的邊框HTML按鈕元素

回答

相關問題