的Internet Explorer 8忽略寬度爲「顯示：表小區」元素

According to quirks mode，Internet Explorer 8中確實爲顯示屬性的支持表的選擇，但在本實施例中它顯示出非常奇怪的行爲
http://jsfiddle.net/e3cUn/3/的Internet Explorer 8忽略寬度爲「顯示：表小區」元素

在正常瀏覽器，內部圖像將被縮放以適應150x150的盒子，而不會改變尺寸比例（拉伸）。

alt text

但在IE8，外箱（藍色）也將延伸：
alt text

1）你見過這樣的事情？它似乎與text-align:center有關：刪除此屬性可修復此問題，但我確實需要居中映像（至少在非ie瀏覽器中）。

2）如果這個問題無法修復，我該如何爲IE提供一個特殊的display值？我在網上看到了一些例子，例如#display: block;，但所有這些例子都只適用於IE7。

編輯我知道<!--[if IE 8]>和類似的命令放在HTML中，但我實際上正在尋找一種方法來做到這一點在CSS文件。像這樣的東西

display: table-cell; 
    #display: block;

第二行不是註釋，它覆蓋了ie7和以下的以前的值。（但不是ie8）

謝謝！

來源

2011-01-05 Nikita Rybak

+1，只是自己碰到同樣的可怕的錯誤！ – 2011-10-11 17:09:00

你也可以用'display：block \ 9;'來定位IE8。 – Tower 2012-01-01 00:46:56

加入後賞金，我最終通過將我的CSS定位到IE8來解決這個問題。我已經使用Paul Irish's technique of adding classes to the <html> element使用條件註釋：

<!--[if lt IE 7 ]> <html class="ie6 ielt9"> <![endif]--> 
<!--[if IE 7 ]> <html class="ie7 ielt9"> <![endif]--> 
<!--[if IE 8 ]> <html class="ie8 ielt9"> <![endif]--> 
<!--[if IE 9 ]> <html class="ie9"> <![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

所以我不得不做的就是添加一個額外的CSS規則IE 8，下：

.img-container { display: table-cell; } /* IE9+ and other browsers */ 
.ielt9 .img-container { display: block; } /* IE8 and lower */

再加上techniques for vertically centring images，這給了我一個不錯的跨瀏覽器解決方案。

來源

2011-10-12 08:52:30

有條件的風格的好方法！像所有驚人的事情一樣，在回顧中似乎很簡單。 – 2011-10-12 10:51:24

你有doctype標籤嗎？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head>

我有一個與IE相同的問題，解決了這個問題。

好運

來源

2011-01-05 19:22:45 Sebastjan

我把'嚴格'改爲'過渡'，依然如此。好吧，謝謝你的努力！ – 2011-01-05 19:26:46

如果文本對齊：中心不能正常工作，你可以嘗試以下方法，而不是（除非你有一些原因，使用表格的佈局是必要的）。這通常是居中任何塊佈局元素的首選方法。使用文本對齊中心後備必要的時候，但我的經驗不可靠的 - 你不能使用嵌套的div等
```
img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 
```
如果需要對IE做一個自定義替代的最簡單的方法是使用一個外部的樣式表，並在<head>部分提供以下：
```
 
```
供應，下面的普通一個樣式表，它應該覆蓋它。如果是這樣，您可以隨時在需要覆蓋的語句末尾提供!important標籤（儘管最好避免這種情況，除非絕對必要，因爲它會弄亂子元素的繼承關係，並且您經常不得不記住它）。例如：
```
.root img { 
    text-align: left !important; 
    ... 
} 
```

來源

2011-01-05 19:29:59

1）'display：table-cell'是我知道垂直居中圖像的唯一體面的方式。如果我刪除它，水平居中不再是一個問題了。 – 2011-01-05 19:42:01

2）我知道，我實際上正在尋找一種方法來提供特定於IE的值_inside_css文件。我不想爲ie創建單獨的樣式表（雖然我會，如果這是唯一的選擇）。你知道嗎？ – 2011-01-05 19:43:07

1）我在一個簡短的測試中注意到，你可以在容器元素中使用'display：table-cell'，在img元素上使用'margin：auto'技巧。所以你可能會從'.root'元素中刪除'text-align：center'，直接改爲'img'。 2）我見過的唯一的內部IE CSS破解（儘管我不喜歡它），它使用'* *'，我相信它仍然可以在IE8中運行。我也沒有觀察到您在IE7中報告的拉伸，這是奇怪的，因爲IE8是錯誤的。 – 2011-01-05 20:54:45

width使用代替max-width因爲在IE8的圖像的實際寬度將採取爲表。檢查這Fiddle。

重新排列CSS：

.root img { 
    width: 130px; 
    max-height: 130px; 
}

更新

CSS：

.root span { 
    width:130px; 
    overflow:hidden; 
    display:inline-block; 
} 
.root img { 
    max-width: 130px; 
    max-height: 130px; 
}

HTML：

<div class="root"> 
    <span><img src=http://www.google.com/intl/en_com/images/srpr/logo1w.png /></span> 
</div>

來源

2011-10-12 04:44:19 Sanooj

這是一箇中途解決方案，但當圖像高度大於其寬度時，不會保持圖像的高寬比，對吧？ – 2011-10-12 08:42:30

好吧，我已經更新了http://jsfiddle.net/e3cUn/61/，但您需要使用圖像外的跨度。請檢查上面的答案更新 – Sanooj 2011-10-12 09:06:18

偉大的解決方案，+1。由於我已經將IE 7和IE 6作爲CSS的對象，因此我決定改變我的代碼，將相同的CSS定位到IE 8，這爲我解決了問題。否則，我肯定會這樣做。 – 2011-10-13 12:41:45

這似乎幫助，如果一個display:table-cell元素的父容器具有display:table屬性（和table-layout:fixed），見this example和this related question。

來源

2013-03-27 11:52:06 0x4a6f4672

'table-layout：fixed'似乎爲我解決了它。謝謝。 – 2013-12-09 15:49:40

的Internet Explorer 8忽略寬度爲「顯示：表小區」元素

回答

相關問題