css在FireFox的Tr裏面顯示div，但是IE增加了行的寬度

我在理解發生了什麼以及如何修復它時遇到了一些困難。css在FireFox的Tr裏面顯示div，但是IE增加了行的寬度

我有一些div包含顯示錶格數據時導致寬度問題的一些圖標。如果我刪除包含圖標的div，行寬將以我想要的方式結束（請參閱下面的firefox示例）。

這裏是在Firefox中的觀點這是我想要的（注意圖標在紅色圓圈的定位，這是在同一個y座標一致，或左右）： alt text http://www.redsandstech.com/ff_display.jpg

下面是IE7的視圖（注意發生了什麼圖標和灰線的寬度，這是錶行）： alt text http://www.redsandstech.com/ie_display.jpg

這裏的HTML：

<table> 
<tbody> 
    <tr> 
    <td> 
     <span>stuff 1</span> 
     <span>stuff 2</span> 
     <div class="prop_edit"><img class="img_height14" src="edit.jpg"></div> 
     <div class="prop_archive"><img class="img_height14" src="archive.jpg"></div> 
     <div class="prop_delete"><img class="img_height14" src="delete.jpg"></div> 
     <div style="display:none;"> 
      <div>Links Here</div> 
     </div> 
    </td> 
    </tr> 
</tbody>

^h ERES的CSS：

.prop_edit{ 
float:right; 
position: relative; 
top: 0px; 
right:50px; 

} 
.prop_archive{ 
    float:right; 
    position: relative; 
    top: 0px; 
    right:10px; 
} 
.prop_delete{ 
    float:right; 
    position: relative; 
    top: 0px; 
    right: -30px; 
} 
.img_height14{ 
    height:14px; 
    vertical-align:top; 
    position:relative; 
}

我已經嘗試了一堆不同的CSS的東西，但實際上我只是劈砍而去希望能想辦法的。任何人有一些提示可以幫助我？

在此先感謝。

來源

2010-04-05 Ronedog

爲什麼你需要這個部門？只需將圖像本身浮動到右側即可。就像我告訴其他一百萬人一樣，你不能在一張桌子內部使用分割而不會產生一些你無法修復的不利影響，它們並不意味着在那裏。

我的猜測是，right: -30px被解釋爲在右側添加30px以騰出空間。然而，將圖像向右移動將會是一個更好的解決方案，您可以在它們周圍添加一個邊距以正確地分隔它們。

此外，你應該漂浮任何東西的權利第一，而不是內容後。大多數瀏覽器通常會將內容右移一個新行，如果它在內容之後，那麼就是正確的行爲。這是因爲默認情況下，一個部門將自行開始一個新行，然後它將被修改爲向右浮動，通常位於已創建的同一條新行上。

所以是的，有幾個不同的事情導致問題。不過，這不是導致所有問題的一件事。

來源

2010-04-05 23:10:39 animuson

好吧，謝謝你讓我成爲你的百萬和一個客戶。我來到這個論壇，因爲我是網絡開發的新手，尤其是當涉及到設計和佈局時，我可以使用任何人們願意給予的提示，比如你的......這個論壇一直是我參與過的最好的一部分。我解決了我的問題，只是將圖標的圖像標籤移動到表格行內容的開始位置，然後將圖像標籤向右移動，我將所有其他東西保留原樣，想要它。謝謝您的幫助。 – Ronedog 2010-04-06 05:06:08

css在FireFox的Tr裏面顯示div，但是IE增加了行的寬度

回答

相關問題