IE6、7 和 8 中的 CSS min-width
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2356525/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS min-width in IE6, 7, and 8
提问by Aaron
I found many answers to this question on Google, but none of them seem to work for all browsers.
我在谷歌上找到了这个问题的很多答案，但似乎没有一个适用于所有浏览器。
I am looking for a CSS-only way to get min-width working on Firefox, IE6, IE7, and IE8. It is well-known that IE does not support min-width, so several hacks are out there to try to emulate the behavior of min-width. Unfortunately, I have not had any luck with them.
我正在寻找一种仅使用 CSS 的方法来让 min-width 在 Firefox、IE6、IE7 和 IE8 上工作。众所周知，IE 不支持 min-width，因此有一些黑客试图模仿 min-width 的行为。不幸的是，我对他们没有任何运气。
Specifically, this is what I'm trying to do:
具体来说，这就是我想要做的：
<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>
Does anyone have a way to get this to work?
有没有人有办法让这个工作？
采纳答案by Aaron
So it turns out that the necessary hack for getting min-width to work in all browsers isn't as ugly as many make it out to be.
所以事实证明，让 min-width 在所有浏览器中工作的必要技巧并不像许多人认为的那样丑陋。
All I had to do was add CSS for a div within the largeCelland add an empty div at the end of the cell. The div is only 1px tall, so it doesn't really make the cell look larger than it should be.
我所要做的就是为 div 中的 div 添加 CSSlargeCell并在单元格的末尾添加一个空的 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>
回答by fire
I use:
我用：
min-width: 200px;
_width: 200px; /* IE6 */
回答by Balaji Birajdar
min-height:expression( document.body.clientHeight +'px');
min-width:expression( document.body.clientWidth +'px');
回答by KingMaker
By default the Document mode in IE will be Quirks mode
默认情况下，IE 中的文档模式将是 Quirks 模式
Solution: add the doctype on top of your html page
解决方案：在 html 页面顶部添加 doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
回答by Rishabh Gupta
After so many hack that i have tried none of them works for me for this "min-width" issue, but finally i got its solution for IE 8.
经过如此多的黑客攻击，我尝试过没有一个适合我解决这个“最小宽度”问题，但最终我得到了 IE 8 的解决方案。
Try to use this: <!DOCTYPE html>as your DOC type, this is HTML 5 DOC Type that turns your IE8 page to behave like mozilla or webkit browser.
尝试使用这个：<!DOCTYPE html>作为您的 DOC 类型，这是 HTML 5 DOC 类型，它将您的 IE8 页面变成像 mozilla 或 webkit 浏览器一样的行为。
So apart for min-width and min-height issue, it solves many IE8 problems very easily.
所以除了 min-width 和 min-height 问题，它很容易解决了很多 IE8 的问题。
If my post helps you please mail me with your name thats it works for you.
如果我的帖子对你有帮助，请用你的名字寄给我，这对你有用。
回答by NominalAeon
I was having a similar issue, I needed a site to be 95% unless it was less than 980px.
我遇到了类似的问题，我需要一个网站为 95%，除非它小于 980px。
Nothing here worked, and in desperation I reached out to Bill Burlington's expression answer. The one mentioned above didn't work for me, but if I used a more robust expression it did!
这里没有任何效果，绝望中我联系了比尔伯灵顿的表情回答。上面提到的那个对我不起作用，但如果我使用更强大的表达它就可以了！
width: expression ( document.body.clientWidth < 980 ? "980px" : "95%" );
This basically says if the width is less than 980px, set the width to 980px. If it's wider, set the width to 95%.
这基本上是说如果宽度小于 980 像素，则将宽度设置为 980 像素。如果它更宽，请将宽度设置为 95%。
回答by dennismonsewicz
Try adding:
尝试添加：
overflow: visible
to the element
到元素
回答by y34h
<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>
