【发布时间】：2017-04-28 17:26:18
【问题描述】：
我在使用 position: absolute; 时遇到问题跨浏览器。
在 Chrome 中，表格看起来不错。一切都是对齐的。请参阅以下内容：
https://i.stack.imgur.com/qhrAi.jpg
但是，在 IE (11) 中，列的顶部没有对齐。请参阅以下内容：
https://i.stack.imgur.com/GgSpB.jpg
我将第一列设置为绝对，以便在水平滚动时固定。两种浏览器的滚动操作都很好，但在 IE 中不美观。
风格如下：
<style type="text/css">
.tg {
border-collapse:collapse;
border-spacing:0;
}
.tg td{
font-family:Arial, sans-serif;
font-size:14px;
padding:10px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
}
.tg th{
font-family:Arial, sans-serif;
font-size:14px;
font-weight:normal;
padding:10px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
}
.tg .tg-941l{
background-color:#ffc000;
text-align:center;
vertical-align:middle;
}
.tg .tg-huo5{
background-color:#ffc000;
vertical-align:middle;
}
.tg .tg-Sidebar{
background-color:#ffc000;
vertical-align:middle;
position: absolute;
}
.tg .tg-yw4l{
vertical-align:top;
}
</style>
这里是第一个 td 表的开头：
<table class="tg" style="undefined;table-layout: fixed; width: 1290px">
<colgroup>
<col style="width: 100px">
<col style="width: 58px">
<col style="width: 181px">
<col style="width: 62px">
<col style="width: 68px">
<col style="width: 42px">
<col style="width: 76px">
<col style="width: 52px">
<col style="width: 79px">
<col style="width: 67px">
<col style="width: 95px">
<col style="width: 90px">
<col style="width: 668px">
</colgroup>
<tr>
<th height="33" width="90" class="tg-Sidebar"><b>Assembly</b></th>
<th class="tg-huo5">P/N</th>
<th class="tg-huo5">CPU</th>
<th class="tg-huo5">RAM</th>
<th class="tg-huo5">Compact flash</th>
<th class="tg-huo5">VDC input</th>
<th class="tg-huo5">Power supply</th>
<th class="tg-huo5">Ignite Online</th>
<th class="tg-huo5">Introduced</th>
<th class="tg-huo5">Last shipped</th>
<th class="tg-huo5">History</th>
<th class="tg-huo5">Field replacement</th>
<th class="tg-huo5">Notes</th>
</tr>
<tr>
<td height="49" width="90" class="tg-Sidebar"><b> BC-700 </b></td>
<td class="tg-yw4l">50639</td>
<td class="tg-yw4l">Intel Celeron, 400 MHz or VIA C3, 733 MHz</td>
<td class="tg-yw4l">256 MB</td>
<td class="tg-yw4l">1GB</td>
<td class="tg-yw4l">5</td>
<td class="tg-yw4l">50652, 50893, or 51146</td>
<td class="tg-yw4l">No</td>
<td class="tg-yw4l">2005</td>
<td class="tg-yw4l">5/1/2009</td>
<td class="tg-yw4l">Obsolete. Replaced by BC-710.</td>
<td class="tg-yw4l">BC-711 and power supply</td>
<td class="tg-yw4l">Original mid-end M86.</td>
</tr>
任何想法或 cmets 将不胜感激。
感谢您的帮助！
【问题讨论】：
-
由于您已为每一列分配宽度值，因此表格在浏览器中的响应速度会降低，请尝试使用百分比来代替宽度。例如width: 10% 而不是 width:129px。
-
我现在就试试这个。感谢您的快速回复！
-
没问题，如果这对你有用，请告诉我。
-
我将继续将点值更改为百分比以确保一致性；但是，表格顶部仍然存在偏移量。将位置设置为相对，顶部边框在所有浏览器（IE、Chrome 和 FF）上都是齐平的。当设置为绝对时，只有 IE 有问题。 link
-
我会测试你的代码，看看我能不能想出一个解决方案。
标签： html css google-chrome internet-explorer