2012-05-18 53 views
0

輸入按鈕不正確地高於輸入字段。輸入css渲染瀏覽器不一致

我使用Firebug複製應用於所討論的3個元素(包含p元素和2個子元素input元素)的所有樣式以複製問題。

http://jsfiddle.net/XBjz3/

我有一種感覺,這是我使用的輸入按鈕負相對定位做。

顯示,因爲它應該在

  • 火狐12
  • 鉻19
  • 的Internet Explorer 9個

顯示錯誤的

  • 的Android 2.3.5瀏覽器
  • 的iOS 5.1瀏覽器
  • 的Safari 5.1.7
  • 歌劇院11.6

很奇怪的是,它顯示在Chrome罰款時,其他3個WebKit瀏覽器使得它不正確。

+0

對我來說,垂直位置似乎不一致,而不是高度。 – Joonas

+0

我沒有說輸入按鈕上的負相​​對位置。 – gavsiu

回答

0

找到了與預期完全相同的解決方案。

http://jsfiddle.net/XBjz3/8/

下面是從原來的變化。

#pwbox-33 { 
    vertical-align: bottom; 
} 
.pw-submit { 
    top: 0; 
    vertical-align: bottom; 
} 

經測試可用於Firefox,Chrome,IE,Safari,Opera和Android股票瀏覽器。

0

而不是使用

top:-0.5em; 

的您可以使用

bottom : 0.4em; 

正如它沒有很好的做法,使用負值的位置。

+0

不解決問題。嘗試在Opera和Safari中。 – gavsiu

+0

嘗試提供一些保證金可能會起作用。 – Shreedhar

0

檢查這一項我希望這將幫助你..

HTML

<p> 
    <input type="password" class="pw-box" id="pwbox-33" name="post_password"> 
    <input type="submit" class="pw-submit" value="Submit" name="Submit"> 
</p> 

CSS

p { 

    width:50%; 
    display: inline; 
    float: left; 
    padding-left: 1%; 
    padding-right: 1%; 
    position: relative; 
    font-size: 1em; 
    line-height: 1.5em; 
    margin:20px 0 0 20px; 
    background:rgba(0,0,0,0.1); 

} 
#pwbox-33 { 
    width: 200px; 
    border:0; 
    background: #606D80; 
    border-top:solid 1px #1F3453; 
    color: #DCE0E6; 
    margin: 0; 
    padding: 0.5em; 
    text-shadow: 0 1px 0 #1F1F20; 
    vertical-align: top; 
} 
.pw-submit{ 
cursor: pointer; 
    background:#2B4C7E; 
    color: #DCE0E6; 
    padding: 0.5em 1em; 
    position: absolute; 
    text-shadow: 0 -1px 0 #1F1F20; 
    top: -0.3em; 
    border:0; 
    font-size:12px; 
    font-family:arial; 
    left:200px; 
    border-bottom:solid 0.5em #0E2952; 
    outline:0; 

} 

http://jsfiddle.net/YjNJ5/3/

+0

它看起來不像原來的一樣。在Firefox中,輸入字段位置較高,提交按鈕與輸入字段重疊。 – gavsiu