2012-07-22 99 views
0

我有一個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> 

只是讓你知道它的一個自動生成的代碼,所以我沒有選擇,只能使用絕對定位。此外,某些部分可能無效或看起來令人驚訝,但請忽略它們。有任何想法嗎 ?

+0

爲什麼.000px?你的整個標記是不正確的。 – 2012-07-22 07:54:55

+0

異形是對的。只需刪除下面答案中顯示的所有不正確的內嵌範圍樣式即可。例如。 ''將它改爲''並且它應該沒問題。 – Stano 2012-07-22 09:08:57

回答

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的截圖

enter image description here

請參見下面的修改後的代碼按你的要求。

<!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> 
+0

我已經給出了我上面的一些評論,說明爲什麼我不能完成你的建議。 – nav 2012-07-23 07:14:07

+0

在IE 7或更高版本中查看您的HTML文件 – 2012-07-23 07:25:56

+0

我在IE9中檢查了它,並且它也顯示不正確。不幸的是,我們大多數客戶使用IE。 ;-) – nav 2012-07-23 07:27:31