1

入力テキスト フィールド、パスワード テキスト フィールド、およびログイン ボタンをすべてのブラウザで揃える際に問題が発生しています。あるブラウザで動作する場合、別のブラウザでは動作しません。回避策はありますか？

Google Chromeでの動作:

header #login_button
{
    padding: 8px;
    border-radius: 0px 6px 6px 0px;
    float: right;
    margin-top: 2px;
}

header input[type=submit]
{
    border: none;
    border-radius: 3px;
    padding: 4px 8px;
    font-weight: bold;
    font-size: 10px;
}

Internet Explorerでの動作

header #login_button
{
    padding: 9px;
    border-radius: 0px 6px 6px 0px;
    float: right;
}

header input[type=submit]
{
    border: none;
    border-radius: 3px;
    padding: 4px 8px;
    font-weight: bold;
    font-size: 9px;
}

Firefoxでの動作

header #login_button
{
    padding: 7px;
    border-radius: 0px 6px 6px 0px;
    float: right;
}

header input[type=submit]
{
    border: none;
    border-radius: 3px;
    padding: 4px 8px;
    font-weight: bold;
    font-size: 9px;
}

違いを要約すると：

Chrome には以下が必要です。

font-size:10px;
padding: 8px;
margin-top: 2px;

Firefox には以下が必要です。 

font-size: 9px;
padding: 7px;

IE には次が必要です。 

font-size: 9px;
padding: 9px;

どんな助けでも大歓迎です。

ありがとう。

4

2 に答える 2

2

ブラウザーごとに異なるスタイルを記述する必要はないと思います。normalize.css次のようなもの、または次のいずれかreset.cssから使用できます。これらの CSS ファイルには、HTML がすべてのブラウザーでほぼ同じに見えるようにするために必要なスタイリングとハックが含まれています。

http://necolas.github.com/normalize.css/

http://www.cssreset.com/

それが役立つことを願っています。

于 2012-12-21T05:49:53.587 に答える
-2

あなたはこのように使うべきです：

私は言及するのを忘れました、下の行をコピーして貼り付け、内側にタグを付ける.webkitと機能します

 <pre>
    <script src="http://github.com/rafaelp/css_browser_selector/raw/master/css_browser_selector.js" type="text/javascript"></script>
    </pre>

ヘッダー入力[タイプ=送信]{
    フォントサイズ：10px; /* 標準 */
    font-size：10px \ 9 / *IE8以下*/
    パディング：9px \ 9; / *IE8以下*/
    *パディング：15px \ 9; / *IE7以下*/
    _padding：16px \ 9; / * IE 6 * /
}

クロムの場合：

.webkitヘッダーinput[type= submit] {
  フォントサイズ：10px;
  パディング：8px;
  マージントップ：2px;
}

参照リンク

于 2012-12-21T05:17:20.457 に答える