firefox絕對定位問題

我在firefox中正確渲染這個問題。它在鍍鉻和徒步旅行中很好地呈現。firefox絕對定位問題

<div style="" id="login_inline"> 
    <form accept-charset="utf-8" action="https://stackoverflow.com/users/login" method="post" id="UserLoginForm"> 
    <div style="display:none;"> 
     <input type="hidden" value="POST" name="_method"> 
    </div> 
    <input type="text" id="UserDummyEmail" tabindex="1" value="Email" name="data[User][dummyEmail]" style="display: block;"> 
    <input type="text" id="UserDummyPassword" tabindex="2" value="Password" name="data[User][dummyPassword]" style="display: block;"> 
    <input type="text" id="UserEmail" maxlength="255" tabindex="3" name="data[User][email]"> 
    <input type="password" id="UserPassword" tabindex="4" name="data[User][password]"> 
    <div class="submit"> 
     <input type="submit" value="Login"> 
    </div> 
    </form> 
</div>

CSS：

#login_inline { 
position:absolute; 
right:10px; 
top:30px; 
width:420px; 
} 

.submit { 
display:inline; 
position:absolute; 
left:360px; 
} 

#UserPassword { 
position:absolute; 
left: 185px; 
} 

#UserDummyPassword { 
position:absolute; 
left:185px; 
z-index:1; 
color:gray; 
} 

#UserDummyEmail { 
position:absolute; 
left:10px; 
z-index:1; 
color:gray; 
} 

#UserEmail { 
position:absolute; 
left:10px; 
}

Firefox顯示：

Firefox rendering

Chrome的渲染：

enter image description here

編輯：Live example (Correct rendering)

來源

2011-03-30 AlexBrand

沒有任何理由使用位置此佈局的大小？ – Mahima 2011-03-30 04:16:57

是的，我需要密碼字段頂部的虛擬密碼字段和用戶字段頂部的虛擬用戶字段。 – AlexBrand 2011-03-30 04:20:54

我剛剛在FF和鉻中檢查了你的jsfiddle。它對我來說很好。我正在使用FF3.6 – Mahima 2011-03-30 04:27:34

通過定位絕對你變得依賴於正確的輸入元素的寬度。這很難做到跨瀏覽器，因爲瀏覽器傾向於使用不一致樣式的自定義或本地元素。使用內聯塊或浮動佈局來處理不一致的寬度會更好。

如果你真的要那樣做，有一些黑客使用CSS3 box-sizing性能和/或手動調整喜歡的line-height和字體大小和padding屬性讓所有瀏覽器上輸入大小一致，但是這比它更難聲音。

這個問題對box-sizing和使用百分比/自動寬度得到一致性的一些信息：input with display:block is not a block, why not?

編輯：基於您的評論上面，你可能需要設置一些DIV包裝同時設置的大小/位置隱藏和可見的元素，然後使用百分比寬度和box-sizing解釋。

<div class="input_wrapper" style="width:100px;position:relative"> 
    <input style="width:100%;box-sizing:border-box;position:absolute"> 
    <div class="fake_input" style="width:100%;position:absolute"> 
</div>

的關鍵，這一切是box-sizing:border-box是對錶單輸入的填充和邊框計算瀏覽器的差異不太敏感。

來源

2011-03-30 04:26:23 SpliFF

是的。很好的修復+1謝謝。以下是一些針對那些希望做類似的事情的例子，但是在textarea上方浮動。 http://jsfiddle.net/f4RQn/ – 2012-11-01 17:11:59

我發現，通常這是好事，把輸入字段的字體大小，這將使他們的（更）一致

來源

2014-03-31 14:38:15

firefox絕對定位問題

回答

相關問題