在IE6,7和8中的CSS最小寬度

我在Google上發現了很多關於這個問題的答案，但它們都不適用於所有瀏覽器。在IE6,7和8中的CSS最小寬度

我正在尋找一種僅限於CSS的方式來獲取Firefox，IE6，IE7和IE8上的最小寬度工作。衆所周知，IE不支持最小寬度，所以有幾個黑客試圖模仿最小寬度的行爲。不幸的是，我對他們沒有任何運氣。

具體來說，這就是我想要做的事：

<style type="text/css"> 
    table.dataTable td { 
     white-space: nowrap; 
    } 

    table.dataTable td.largeCell { 
     white-space: normal; 
     min-width: 300px; 
    } 
</style> 

<table class="dataTable"> 
    <tr> 
    <td>ID</td> 
    <td>Date</td> 
    <td>Title</td> 
    <td class="largeCell">A large amount of data like a description that could 
     span several lines within this cell.</td> 
    <td>Link</td> 
    </tr> 
</table>

沒有人有辦法得到這個工作？

來源

2010-03-01 Aaron

IE> = 7支持'min-width'（儘管版本7中有bug）。它已經被Firefox支持很久了。 – Quentin 2010-03-01 14:52:14

Firefox不是問題。這只是我需要一個可以在所有這些瀏覽器上運行的解決方案。另外，我在IE8中測試'min-width'，它不適合我。 – Aaron 2010-03-01 14:59:00

對於所有回答的人，我正在努力嘗試解決方案。 – Aaron 2010-03-01 15:25:41

所以事實證明，用於獲取最小寬度在所有瀏覽器工作所需的手段是不醜如許多做出來是。

我只需要在largeCell內爲div添加CSS，並在單元格末尾添加一個空的div。 div的高度只有1px，因此它並不能真正使單元看起來比它應該大。

<style type="text/css"> 
    table.dataTable td { 
     white-space: nowrap; 
    } 

    table.dataTable td.largeCell { 
     white-space: normal; 
     min-width: 300px; 
    } 

    table.dataTable td.largeCell div { 
     margin: 0px 0px 0px 0px; 
     height: 1px; 
     width: 300px; 
    } 
</style> 

<table class="dataTable"> 
    <tr> 
    <td>ID</td> 
    <td>Date</td> 
    <td>Title</td> 
    <td class="largeCell">A large amount of data like a description that could 
     span several lines within this cell. 
     <div></div> 
    </td> 
    <td>Link</td> 
    </tr> 
</table>

來源

2010-03-01 16:09:44 Aaron

我用：

min-width: 200px; 
_width: 200px; /* IE6 */

來源

2010-03-01 14:50:39 fire

'_width'是IE6唯一可識別的css值嗎？不幸的是，這並不適合我。 – Aaron 2010-03-01 15:35:34

是的，你可以使用_anything來聲明IE6唯一的財產，那是在IE6黑客的日子，但我會建議你現在使用條件註釋 – fire 2010-03-01 16:02:33

<style type="text/css"> 
.table1 th a { 
    display:inline-block; 
    width:200px"; 
} 
</style> 

<table> 
    <tr> 
     <th><a>title1</a></th> 
     <th><a>title2</a></th> 
    </tr> 
    <tr> 
     <td>text</td> 
     <td>text</td> 
    </tr> 
</table>

來源

2010-09-10 21:02:25 y34h

爲什麼後面有引號寬度：200px – 123 2013-10-13 10:21:19

min-height:expression(document.body.clientHeight +'px'); 
min-width:expression(document.body.clientWidth +'px');

來源

2011-10-12 10:29:29

這一個失敗了。你永遠可以成爲一個激流漂流指南。儘管如此，可能沒有像對付IE的bug那麼多刺激。 – plntxt 2012-02-09 15:18:30

他他..這將是一個很好的工作..我希望我可以得到更多的與它... :)我愛你的評論.. – 2012-02-14 07:06:53

默認情況下，IE中的文檔模式將怪癖模式

解決方案：增加您的html頁面頂部的DOCTYPE

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

來源

2012-07-09 07:22:23 KingMaker

嘗試增加：

overflow: visible

的元素

來源

2012-09-17 16:38:04 dennismonsewicz

之後，我已經試過他們沒有那麼多的黑客對我的作品對這種「最小寬度」的問題，但最後我得到了它的解決方案爲IE 8

嘗試使用這是：<!DOCTYPE html>作爲您的DOC類型，這是HTML 5 DOC類型，可以讓您的IE8頁面像Mozilla或Webkit瀏覽器一樣運行。

因此除了最小寬度和最小高度問題外，它很容易解決許多IE8問題。

如果我的文章可以幫助您，請寄給我您的名字，這對您有用。

來源

2012-11-26 10:40:44

文檔類型：<！DOCTYPE html> – 2012-11-26 10:42:08

我有一個類似的問題，我需要一個網站是95％，除非它小於980px。

這裏沒有任何工作，在絕望中我接觸到了比爾伯靈頓的表達答案。上面提到的那個並不適合我，但如果我使用了更強大的表達方式，那麼！

width: expression (document.body.clientWidth < 980 ? "980px" : "95%");

這基本上說，如果寬度小於980px，請將寬度設置爲980px。如果它更寬，請將寬度設置爲95％。

來源

2013-02-05 16:15:22 NominalAeon

在IE6,7和8中的CSS最小寬度

回答

相關問題