IE中的div表格式化问题

时间:2011-05-03 13:19:15

标签: css internet-explorer html

我在使用我在IE中正确显示的div表控件时遇到了问题。

我的“桌子”只是一系列看起来像桌子的div,在FF和Chrome中看起来都不错,但似乎无法让我的“行”在IE中正确显示。

它似乎将所有行压缩到表格的左侧,然后将它们包裹起来。我可以通过调整行div的宽度来调整它,但我想找到另一种解决方法,因为这是一个控件,并且知道要应用的适当宽度可能很困难。以下是它正在做的屏幕截图。

Here is what it looks like.

还注意到,当我在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>

3 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

除了表格评论(我同意)之外,您确定在内容部分中没有产生太多开头或结束div吗?以防万一...

我现在无法在IE中测试,但如果您的标题行正确显示且内容行不正确,我会尝试消除两者之间的差异,以查看导致问题的原因。与clear:bothposition:relative等一样,IE中的开发人员工具可以提供帮助。

找到导致它的原因后,您可以为IE寻找替代解决方案。

顺便说一下,具有特定ID的元素只能在页面上显示一次,并且您有多个<span id="arrow">

答案 2 :(得分:1)

您可以尝试明确设置每行的宽度等于标题的宽度。

在jQuery中试试这个:

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

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

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