0

入力ボタンが入力フィールドよりも高くなっています。

pFirebug を使用して、問題の 3 つの要素 (包含要素と 2 つの子要素) に適用されたすべてのスタイルをコピーしてinput、問題を再現しました。

http://jsfiddle.net/XBjz3/

入力ボタンで負の相対位置を使用していることに関係していると感じています。

本来あるべき姿で表示されます

  • Firefox 12
  • クロム 19
  • Internet Explorer9

表示がおかしい

  • Android 2.3.5 ブラウザ
  • iOS 5.1 ブラウザ
  • サファリ5.1.7
  • オペラ 11.6

他の 3 つの Webkit ブラウザーが正しくレンダリングしないのに、Chrome で正常に表示されるのは奇妙です。

4

3 に答える 3

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/

于 2012-05-18T11:35:25.623 に答える
0

使用する代わりに 

top:-0.5em;

使用できます

bottom : 0.4em;

位置に負の値を使用することはお勧めできません。

于 2012-05-18T06:14:37.643 に答える
0

意図したものとまったく同じように見えるソリューションが見つかりました。

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-18T17:39:17.293 に答える