FF/Chrome中奇怪的表格對齊行爲

我剛剛在FF3.5和Chrome 10中隔離了一個奇怪的行爲，這就解釋了爲什麼我的一些表格沒有像我期望的那樣對齊。FF/Chrome中奇怪的表格對齊行爲

如果在表格上設置了CSS邊距（或通過常規*選擇器），則align屬性不再起作用。

我意識到現在不贊成使用align，我們都應該使用容器的文本對齊樣式來設置表格對齊方式，但有時當您需要在包含div內的各種內容的不同對齊方式時，它仍然非常方便。

IE（一次）似乎是普通人，並且不受邊距設置的影響。檢查它在： http://www.songtricks.com/AlignBug.html

這是代碼 - 任何想法？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
</head> 

<body> 

     <table border="1" width="50%" align="center" style="margin:0px;"> 
     <tr> 
      <td>Table with style="margin:0px;"</td> 
     </tr> 
     </table> 

     <table border="1" width="50%" align="center"> 
     <tr> 
      <td>Table with no style</td> 
     </tr> 
     </table> 

</body> 
</html>

來源

2011-04-20 Stephen

你期望得到什麼樣的答案？當你設置align =「center」**和**'margin：0'時，什麼是合乎邏輯的？ – Kobi 2011-04-20 20:58:37

夥計。樣式按照它們讀取的順序進行應用。首先你設置中心，然後你設置margin：0px。在談論利潤時，IE正在和你一起玩（正如它的意思）。不要責怪其他人。 – Alfabravo 2011-04-20 21:01:23

感謝您的快速回復。 @科比，爲什麼這個組合不合邏輯？除非您首先知道對齊上下文，否則保證金沒有意義。 @Alfabravo，我嘗試交換對齊和樣式屬性，但結果相同。 – Stephen 2011-04-20 21:06:18

我不知道align屬性是如何工作的，但它看起來像是當你將一個margin-top或margin-bottom應用到它似乎沒有影響的樣式。只有當您更改頁邊距左右屬性時，纔會導致此錯誤。我的猜測是，align屬性與margin：0 auto相同。當我爲左右邊距添加自動功能時，您會得到期望的結果。

<table border="1" width="50%" style="margin:0px auto;"> 
    <tr> 
     <td>Table with style="margin:0px;"</td> 
    </tr> 
</table>

來源

2011-04-20 20:56:51 locrizak

謝謝，locrizak你是對的。在這種情況下，根本不再需要align =「center」屬性。也許他們內部映射到相同的例程，這就是爲什麼我發生衝突。我想我應該停止使用align屬性，而是在我需要自對齊內容時使用自動邊距。 – Stephen 2011-04-20 21:12:07

FF/Chrome中奇怪的表格對齊行爲

回答

相關問題