只有使用Internet Explorer時，圖像內部的按鈕纔會被切斷。

-1

我有一個按鈕，裏面有圖像和分隔符。的HTML代碼如下：只有使用Internet Explorer時，圖像內部的按鈕纔會被切斷。

<button class="uiImageButton" id="btFactors" style="flex:1 1 0px;" type="button"> 
    <img id="btFactorsImgID" style="vertical-align: bottom;" src=""> 
    <div class="uiImageButtonSeperator">Factors/Formulas</div> 
</button>

而CSS：

.uiImageButton { 
    border: 1px solid; 
    padding: 0px; 
    border-color: #007AC3; 
    background-color: white; 
    color: #007ac3; 
    text-align: left; 
    height: 23px; 
    width: 100%; 
    font-size: 14px; 
    font-family: Muli-Light; 
} 

.uiImageButtonSeperator { 
    border-left: 1px solid lightgrey; 
    padding-left: 4px; 
    vertical-align: bottom; 
    display: inline; 
    margin-left: 1px; 
    margin-right: 2px; 
}

我面臨的問題是，在Internet Explorer中查看網頁時，該按鈕內的圖像被切斷（圖像被放置在按鈕的底部，其中一些被切斷）。當使用Chrome看起來鰭...... 我還發現，加入這行代碼的類uiImageButton

display: flex;

時，它提供的結果是緊挨什麼我真的試圖讓但不密切足夠。

如果有人能解釋爲什麼我只有在IE中遇到這個問題，以及如何正確解決這個問題，那將會很棒。

來源

2016-12-15 itay312

ü可以創建一個演示？我不能重現一個錯誤https://jsfiddle.net/6y26r9jv/ – 3rdthemagical

好吧我重新創建它：https://jsfiddle.net/w4hjpz7o/請用IE打開這個 – itay312

我不明白你在努力實現什麼。圖像被切斷的方式是什麼？它在示例中沒有src，因此不可見。當我放入src時，它顯示得非常好，至少如果它小於按鈕的高度。因此，重複一遍，你試圖達到什麼目的（這不能通過簡單地去除按鈕的高度限制來完成）？ –

我不明白是什麼問題。

只需使用此代碼來製作按鈕。沒有flexbox，沒有額外的樣式和換行。並與IE完美合作。

Jsfiddle。

.button { 
 
    /* no specific styles needed */ 
 
    background: blue; 
 
} 
 

 
.button__image { 
 
    display: inline-block; /* to be on one line with text */ 
 
    width: 10px; /* don't forget sizes for your image */ 
 
    height: 10px; 
 
    margin-right: 10px; 
 
} 
 

 
.button__text { 
 
    font-size: 3em; /* just for fun */ 
 
    vertical-align: middle; /* set image to vertical center */ 
 
}

<button class='button'> 
 
    <img class='button__image' src='http://i.imgur.com/jB0PDw1.png'> 
 
    <span class='button__text'>Factors/Formulas</span> 
 
</button>

來源

2016-12-16 06:58:53 3rdthemagical

謝謝，我看到這個作品。我也想知道爲什麼這裏的代碼https://jsfiddle.net/w4hjpz7o/在IE中不工作（它削減文本）我只想知道原因，所以我會從中學習。 – itay312

@ itay312因爲映像的'src'屬性是空的，它沒有任何大小。要修復它，請填寫'src' attr並設置圖像的寬度和高度。 – 3rdthemagical

好的，謝謝@ 3rdthemagical，我會試試這個。 – itay312

只有使用Internet Explorer時，圖像內部的按鈕纔會被切斷。

回答

相關問題