IE最小宽度为IE6,7和8 [英] CSS min-width in IE6, 7, and 8

问题描述

我在Google上找到了这个问题的许多答案，但都没有适用于所有浏览器。

我在寻找一个CSS的唯一方式min-width工作在Firefox，IE6，IE7和IE8。众所周知，IE不支持min-width，所以几个hack在那里试图模仿min-width的行为。不幸的是，我没有幸运。

具体来说，这是我想要做的：

 < 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>日期< / td> 
< td>标题< / td> 
< td class =largeCell>大量数据，例如可以
的描述跨越该单元格内的几行。< / td> 
< td> Link< / td> 
< / tr> 
< / table> 
  

有人有办法让这个工作吗？

所有我需要做的是在 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>日期< / td> 
< td>标题< / td> 
< td class =largeCell>大量数据，如可能
的描述跨越此单元格内的几行。 
< div>< / div> 
< / td> 
< td> Link< / td> 
< / tr> 
< / table> 
  

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.

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?

解决方案

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.

All I had to do was add CSS for a div within the largeCell and 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.

<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>

这篇关于IE最小宽度为IE6,7和8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！