Css IE中的div表格式问题

我写的一个div表控件在IE中无法正确显示

我的“表格”只是一系列看起来像表格的div，在FF和Chrome中一切看起来都很好，但似乎无法让我的“行”在IE中正确显示

它似乎把桌子左侧的所有行都揉成一团，然后把它们包起来。我可以通过调整row div的宽度来调整它，但我想找到另一个解决方法，因为这是一个控件，知道要应用的正确宽度可能很困难。这是它正在做的一个屏幕截图

我还注意到，当我在22英寸宽屏显示器上最大化我的屏幕时，它会正确地排列所有内容。不知道那里发生了什么

这是我的CSS，我认为标题是足够的解释

.dataTable
{
    border-style: solid;
    border-width: .5px;
    border-color: #dae2c1;
    border-collapse: collapse;
    font-family: PTSansCaptionBold, Arial, Sans-Serif;
}

.Table div
{
  font-size: 12px;
  color: #888;
  margin: 0;
  float: left;
  overflow: hidden;

}

.HeaderRow div
{
    border: 1px solid #f3f5eb;
    padding: 5px 3px;
    background-color: #bcc3a7;
    color: #FFFFFF;
    opacity: 0.7;
    text-transform: uppercase;
    -moz-user-select: none;
    user-select: none;
    cursor: pointer;
    position: relative;
}

.DataRow
{
    clear: both;
}

.DataRow div
{
    border: 1px solid #000000;
    border-color: #e7ecd7;
    padding: 5px 3px;
    min-height: 12px;
}

下面是一些html

<div class="HeaderRow">
<div style="width: 100px; text-align: left;"><span id="arrow"></span>DRAWING #</div>
<div style="width: 100px; text-align: left;"><span id="arrow"></span>LOT #</div>
<div style="width: 100px; text-align: left;"><span id="arrow"></span>Serial #</div>
<div style="width: 100px; text-align: left;"><span id="arrow"></span>AS BUILT</div>
<div style="width: 100px; text-align: left;"><span id="arrow"></span>AS DESIGN</div>
<div style="width: 200px; text-align: left;"><span id="arrow"></span>DESCRIPTION</div>
</div>
<div class="DataRow">
<div style="width: 100px; text-align: left;">0102-10002</div>
<div style="width: 100px; text-align: left;"> </div>
<div style="width: 100px; text-align: left;">1004</div>
<div style="width: 100px; text-align: left;">94</div>
<div style="width: 100px; text-align: left;">9</div>
<div style="width: 200px; text-align: left;">HUT (HARD UPPER TORSO ASSY)</div>
</div>

绘图#
很多#
连载#
竣工
作为设计
描述
0102-10002
1004
94
9
小屋（硬上身组件）

为此，您应该使用一个表，但现在您这样做了。。。仅对IE使用.css，并将宽度设置为更小。你必须这样做，因为IE的盒子模型不同于现代浏览器。此外，如果您不使用表格，您可能需要专门为IE 6和7调整widh。

除了表格注释（我同意），您确定在内容部分没有生成过多的开头或结尾

div

？以防万一

我现在无法在IE中进行测试，但如果标题行显示正确，而内容行显示不正确，我将尝试消除两者之间的差异，以查看问题的原因。像

clear:both

，

position:relative

，等等。IE中的开发工具可以在这方面提供帮助

在你找到导致它的原因后，你可以为IE寻找一个替代的解决方案

---

顺便说一下，具有特定ID的元素在页面上只能出现一次，并且您有多个

可以尝试显式地将每行的宽度设置为页眉的宽度

在jQuery中，尝试以下方法：

var headerWidth = $('.HeaderRow').width();

然后将其设置为每行的宽度

$('.DataRow').css({width: headerWidth });

---

但是你为什么不为此使用

？这正是元素的用途。Divs给了我更多的灵活性，我希望在这个控件中。你能为1或2行发布一些html吗。顺便说一句，半像素的边框宽度？该如何呈现呢？@Colin我想不出使用div而不是表会增加灵活性的场景。事实上，对我来说，您现在拥有的东西似乎没有那么灵活，更容易崩溃，而且是一个语义上毫无价值的元素集合，称为“div-soup”。你如何做到这一点与我无关，但我个人会重新使用

，也许你是对的，佩卡，我仍然想知道这里发生了什么。这很有效。我不太清楚为什么标题行的形式正确，我想我是在我的数据行上叠加了导致问题的东西。