表内的绝对位置文本未正确对齐
我有一个HTML代码。有一个三行三列的表。每个单元格都有一些文字。一切都绝对定位。当我在不同的浏览器中看到这个HTML时，所有浏览器都会正确显示它，除了IE。以下是HTML代码中存在问题的部分。如果你注意到，IE正在将文本向上移动每一行。其他浏览器没有这个问题。
<!DOCTYPE document PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<document xmlns="http://www.w3.org/1999/xhtml">
<meta name="Author" content="***"/>
<meta name="DocumentName" content="Page"/>
<meta name="Date" content="07/21/2012"/>
<notice name="Page">
<html>
<head>
<style type="text/css">
div.Page61989 {}
.f1 {font-family:Arial;font-size:10.00pt;font-style:normal;font-weight:normal;line-height:114%;}
p.normal, table.normal, div.normal {text-align:left; text-indent:0; margin-top:0in; margin-right:0in; margin-bottom:0.0in; margin-left:0in; clear:left;}
</style>
</head>
<body lang="EN-US" link="blue" vlink="purple">
<div class="Page61989" style="position:relative;height:1056px;width:816px;">
<table class="normal" style="width:578.00px;border-collapse:collapse;border:1.00px solid #FF9900;position:absolute;top:328.00px;left:120.00px;">
<tr>
<td style="height:31.000px;width:192.000px;;" >
<p class="normal"><span class="f1" style=";position:absolute;top:0.00px;left:0.00px;" >This table has regular old</span><span class="f1" style=";position:absolute;top:16.00px;left:0.00px;" >square corners.</span></p>
</td>
<td style="height:31.000px;width:192.000px;border-left:1.00px solid #FF9900;" >
<p class="normal"><span class="f1" style=";position:absolute;top:0.00px;left:192.00px;" >Cell 2 Row 1</span></p>
</td>
<td style="height:31.000px;width:192.000px;border-left:1.00px solid #FF9900;" >
<p class="normal"><span class="f1" style=";position:absolute;top:0.00px;left:384.00px;" >Cell 3 Row 1</span></p>
</td>
</tr>
<tr>
<td style="height:31.000px;width:192.000px;border-top:1.00px solid #FF9900;" >
<p class="normal"><span class="f1" style=";position:absolute;top:31.00px;left:0.00px;" >Cell 1 Row 2</span></p>
</td>
<td style="height:31.000px;width:192.000px;border-top:1.00px solid #FF9900;border-left:1.00px solid #FF9900;" >
<p class="normal"><span class="f1" style=";position:absolute;top:31.00px;left:192.00px;" >Cell 2 Row 2</span></p>
</td>
<td style="height:31.000px;width:192.000px;border-top:1.00px solid #FF9900;border-left:1.00px solid #FF9900;" >
<p class="normal"><span class="f1" style=";position:absolute;top:31.00px;left:384.00px;" >Cell 2 Row 3 This table has a</span><span class="f1" style=";position:absolute;top:375.00px;left:384.00px;" >square corner defined.</span></p>
</td>
</tr>
<tr>
<td style="height:16.000px;width:192.000px;border-top:1.00px solid #FF9900;" >
<p class="normal"><span class="f1" style=";position:absolute;top:62.00px;left:0.00px;" >Added another row</span></p>
</td>
<td style="height:16.000px;width:192.000px;border-top:1.00px solid #FF9900;border-left:1.00px solid #FF9900;" >
<p class="normal"><span class="f1" style=";position:absolute;top:62.00px;left:192.00px;" >added another row</span></p>
</td>
<td style="height:16.000px;width:192.000px;border-top:1.00px solid #FF9900;border-left:1.00px solid #FF9900;" >
<p class="normal"><span class="f1" style=";position:absolute;top:62.00px;left:384.00px;" >added another row</span></p>
</td>
</tr>
</table><br style="clear:left;"/>
</div>
</body>
</html>
</notice>
</document>
只是为了让你知道它是一个自动生成的代码，所以我别无选择，只能使用绝对定位。此外，某些部分可能无效或看起来令人惊讶，但请忽略它们。有什么想法吗？
1 个答案:
答案 0 :(得分：1)
如果有帮助，你可以试试这个：
<!DOCTYPE document PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<document xmlns="http://www.w3.org/1999/xhtml">
<meta name="Author" content="***"/>
<meta name="DocumentName" content="Page"/>
<meta name="Date" content="07/21/2012"/>
<notice name="Page">
<html>
<head>
<style type="text/css">
div.Page61989 {}
.f1 {font-family:Arial;font-size:10.00pt;font-style:normal;font-weight:normal;line-height:114%;}
p.normal, table.normal, div.normal {text-align:left; text-indent:0; margin-top:0in; margin-right:0in; margin-bottom:0.0in; margin-left:0in; clear:left;}
.tc{
border:1px solid #FF9900
}
</style>
</head>
<body lang="EN-US" link="blue" vlink="purple">
<div class="Page61989" style="position:relative;height:1056px;width:816px;">
<table cellspacing="0" class="normal" style="width:578px;position:absolute;top:328px;left:120px;"> <tr>
<td class="tc">One-One</td>
<td class="tc">One-One</td>
<td class="tc">One-One</td>
</tr>
<tr>
<td class="tc">One-One</td>
<td class="tc">One-One</td>
<td class="tc">One-One</td>
</tr>
<tr>
<td class="tc">One-One</td>
<td class="tc">One-One</td>
<td class="tc">One-One</td>
</tr>
</table>
</table><br style="clear:left;"/>
</div>
</body>
</html>
</notice>
</document>
下面是ie6截图
根据您的要求查看以下修订代码。
<!DOCTYPE document PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<document xmlns="http://www.w3.org/1999/xhtml">
<meta name="Author" content="***"/>
<meta name="DocumentName" content="Page"/>
<meta name="Date" content="07/21/2012"/>
<notice name="Page">
<html>
<head>
<style type="text/css">
div.Page61989 {}
.f1 {font-family:Arial;font-size:10.00pt;font-style:normal;font-weight:normal;line-height:114%;}
p.normal, table.normal, div.normal {text-align:left; text-indent:0; margin-top:0in; margin-right:0in; margin-bottom:0.0in; margin-left:0in; clear:left;}
</style>
</head>
<body lang="EN-US" link="blue" vlink="purple">
<div class="Page61989" style="position:relative;height:1056px;width:816px;">
<table class="normal" style="width:578.00px;border-collapse:collapse;border:1.00px solid #FF9900;position:absolute;top:328.00px;left:120.00px;">
<tr>
<td style="height:31.000px;width:192.000px;;" >
<p class="normal"><span class="f1" style=";position:absolute;top:0.00px;left:0.00px;" >This table has regular old</span><span class="f1" style=";position:absolute;top:16.00px;left:0.00px;" >square corners.</span></p>
</td>
<td style="height:31.000px;width:192.000px;border-left:1.00px solid #FF9900;" >
<p class="normal"><span class="f1" style=";position:absolute;top:0.00px;left:192.00px;width:192.000px; ">Cell 2 Row 1</span></p>
</td>
<td style="height:31.000px;width:192.000px;border-left:1.00px solid #FF9900;" >
<p class="normal"><span class="f1" style=";position:absolute;top:0.00px;left:384.00px;width:192.000px;" >Cell 3 Row 1</span></p>
</td>
</tr>
<tr>
<td style="height:31.000px;width:192.000px;border-top:1.00px solid #FF9900;" >
<p class="normal"><span class="f1" style=";position:absolute;top:31.00px;left:0.00px;" >Cell 1 Row 2</span></p>
</td>
<td style="height:31.000px;width:192.000px;border-top:1.00px solid #FF9900;border-left:1.00px solid #FF9900;" >
<p class="normal"><span class="f1" style=";position:absolute;top:31.00px;left:192.00px;width:192.000px;" >Cell 2 Row 2</span></p>
</td>
<td style="height:31.000px;width:192.000px;border-top:1.00px solid #FF9900;border-left:1.00px solid #FF9900;" >
<p class="normal"><span class="f1" style=";position:absolute;top:31.00px;left:384.00px;width:192.000px;" >Cell 2 Row 3 This table has a</span><span class="f1" style=";position:absolute;top:46.00px;left:384.00px;width:192.000px;" >square corner defined.</span></p>
</td>
</tr>
<tr>
<td style="height:31.000px;width:192.000px;border-top:1.00px solid #FF9900;" >
<p class="normal"><span class="f1" style=";position:absolute;top:62.00px;left:0.00px;width:192.000px;" >Added another row</span></p>
</td>
<td style="height:31.000px;width:192.000px;border-top:1.00px solid #FF9900;border-left:1.00px solid #FF9900;" >
<p class="normal"><span class="f1" style=";position:absolute;top:62.00px;left:192.00px;width:192.000px;" >added another row</span></p>
</td>
<td style="height:31.000px;width:192.000px;border-top:1.00px solid #FF9900;border-left:1.00px solid #FF9900;" >
<p class="normal"><span class="f1" style=";position:absolute;top:62.00px;left:384.00px;width:192.000px;" >added another row</span></p>
</td>
</tr>
</table><br style="clear:left;"/>
</div>
</body>
</html>
</notice>
</document>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？