2

2 つのフォーム要素の既定のフォーム スタイルをオーバーライドして、テキスト ボックスとボタンが同じ高さになり、横に並んで 1 つの要素のように見えるようにしようとしています。

一部のブラウザでは問題なく表示されますが、一部のブラウザでは垂直方向に 1 ～ 2 ピクセルずれています。これはjsfiddleのデモです。OS X 上の Opera と Firefox で問題が発生しています。

http://jsfiddle.net/QS3ec/6/ 

*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
input[type="text"] {
    background-color: #fafafa;
    padding: 7px;
    font-family: helvetica, arial, sans-serif;
    font-size: 1.2em;
    margin-bottom: 20px;
    display: block;
    border: solid 2px #bbb;
    color: #6f6f6f;
}
input[type="submit"] {
    background-color: #fafafa;
    font-family: helvetica, arial, sans-serif;
    font-size: 1.0em;
    font-weight:bold;
    padding: 7px;
    color: #6f6f6f;
}
input[type="submit"]:hover {
    background-color: #ff379f;  
    color: #fafafa;
}
#subscription-email-text-field {
    display:inline-block; 
    font-size:0.9em; 
    font-weight:400; 
    border:0; 
    width:250px;
    height:32px;
    margin:0;
}
#subscribe-button {
    display:inline-block;
    border-width:0px 0px 0px 1px;
    margin:0;
    height:32px;
}

<div style="background-color:black; padding:20px;">
    <form>
        <input type="text" id="subscription-email-text-field" name="email" placeholder="Enter Email for Newsletter"><!--
   --><input type="submit" id="subscribe-button" value="subscribe">
    </form>
</div>
4

3 に答える 3

1

私が行ったのは、送信ボックスの高さを上げただけです:

height: 46px;

http://jsfiddle.net/QS3ec/9/

これは本当に大変です。Mountain Lion の Safari、Firefox、Opera、および Chrome でテストしたので、これは適切な解決策ではない可能性があります。

問題は、入力が CSS 以外のメカニズムを使用してブラウザーによってレンダリングされた置換要素であるため、スタイルが期待どおりに適用されない可能性があることだと思います。過去に同様の質問があり、この種のことに光を当てました。古い UI コンポーネント、ボタン、入力などのスタイルを設定しようとすると、常に奇妙な動作が発生するようです。

テーブル セルの不一致を表示します。

于 2013-10-05T23:10:07.167 に答える
0

問題は、テキスト ボックスに指定したパディングです。特定のブラウザーでは、パディングは入力タイプ = ボタンまたは送信に対して水平方向の効果しかありません。

// 修理

'box-sizing: content-box' ルールを input[type='submit'] { } クロージャに追加します。

一部のブラウザのみが実装しているため、これは特定のブラウザで実行できます。

回避策として、送信ボタンの高さを

        "height of text-box + ( 2 * padding given to text-box')

不足している垂直方向のパディングを考慮するため。これは、目標を達成するための最良の方法です (クロスブラウザー)。

例: テキスト ボックスの高さ = 32px。ボタンの高さ = 32 + 2 * 7 = 46px

于 2013-10-05T23:14:54.533 に答える