輸入css渲染瀏覽器不一致

輸入按鈕不正確地高於輸入字段。輸入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瀏覽器使得它不正確。

來源

2012-05-18 gavsiu

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

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

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

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

下面是從原來的變化。

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

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

來源

2012-05-18 17:39:17 gavsiu

而不是使用

top:-0.5em;

的您可以使用

bottom : 0.4em;

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

來源

2012-05-18 06:14:37 Shreedhar

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

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

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

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/

來源

2012-05-18 11:35:25

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

輸入css渲染瀏覽器不一致

回答

相關問題