多個瀏覽器中的相對定位不同

我有兩個要排隊的元素，一個文本框和一個跨度。爲了讓他們排隊，並在Firefox看起來不錯我用：多個瀏覽器中的相對定位不同

<input id="myTextBox" style="float: left; margin-right: 5px; position: relative; left: 13.5em; bottom: 1.5em;" type="text" /> 
<span style="visibility: visible; position: relative; left: 12.5em; bottom: 1.5em;">Enter stuff in the box </span>

然而，在IE 8中的文本框上跨度的頂部，切斷文本。如果我改變左邊：13.5em;左：11.8em;它在Internet Explorer中排隊很好，但在Firefox中偏離中心。我在Zend Form中使用裝飾器，所以我必須使用內聯樣式。有沒有辦法讓這兩個瀏覽器的位置排隊？

來源

2011-10-25 awestover89

由於您的<input>是浮動的，所以使用margin-left:10%而不是position:relative和left:10%可能更有意義？同樣對於你的範圍，我會使它display:block;margin-left:10%;clear:left;而不是position:relative;。

我已經使用10%因爲使用em進行佈局在過去給了我跨瀏覽器的問題 - 我現在只用它來處理基於文本的內容。

來源

2011-10-25 15:46:41 Benjie

沒有位置：相對元素看起來比他們應該低，因爲底部：1.5em不會發生。使用位置相對FF的百分比需要30.5％，IE需要26％，因此仍然存在不一致性 – awestover89

您可以使用負邊距： - margin-top：-1.5em做相當於bottom：1.5em :) – Benjie

To幫助解決問題我需要在上下文中看到您的問題 - 我需要了解其他元素的位置和方式。 – Benjie

多個瀏覽器中的相對定位不同

回答

相關問題