1

まずはスクリーンショット

ブラウザの問題

ご覧のとおり、高さ、パディングトップなどを明示的に説明しましたが、ブラウザー間で常にわずかな違いがあります。どうすればそれらを同じにすることができますか? この問題は私を困惑させ続け、私は原因を見つけることができません。使用しているreset.cssを削除しようとしましたが、まだ運がありません

関連する DOM と CSS を参照用に貼り付けます

ドム:

<div id="menu">
        ...
        <form id="topsearch">
            <button name="submit" type="submit" tabindex="2"></button>
            <input id="s" name="s" type="text" value="SEARCH..." tabindex="1" />
        </form>
</d

CSS:

#topsearch {
    height:31px;width:205px;
    padding:8px 0 4px;
    background-color:#202020;
    float:right;
}

#topsearch #s {
    height: 17px;
    padding: 5px;
    vertical-align: middle;
}

#topsearch button {
    width: 26px;
    height: 26px;
    border: none;
}

ビューを Firebug に追加する

viewinfirebug

4

4 に答える 4

0

CSSの残りの部分を指定していないため、Chrome、Internet Explorer 8、およびMozilla Firefoxのデフォルト設定でしかテストできませんでしたが、これは、以下を使用するブラウザー間でまったく同じに見えるはずですposition: absolute。

#topsearch {
    height: 43px;
    width: 205px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    background-color:#202020;
    position: relative;
    float: right;
}

#topsearch #s {
    height: 17px;
    width: 155px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
    position: absolute;
    top: 12px;
    left: 30px;
    border: 0;
}

#topsearch button {
    width: 26px;
    height: 26px;
    border: none;
    position: absolute;
    top: 10px;
}

お好みのスタイリングを適用し、それに応じて位置を変更してtopくださいleft。

于 2010-01-12T01:47:50.470 に答える
0

すべての要素を設定margin: 0してみて、それでも同じ問題が発生するかどうかを確認してください。多くの場合、ブラウザは独自のマージン/パディングをさまざまな要素に適用します。

于 2010-01-09T16:22:41.920 に答える
0

いくつかの可能性があります:

  • JavaScript: 次のように、ブラウザーに応じて JavaScript で異なる値を設定できます: http://rafael.adm.br/css_browser_selector/
  • 条件付き HTML: 特別な<!--[if IE]>タグを使用して、少なくとも Internet Explorer の問題を解決します。
  • サーバー側のスタイルシートの切り替え: サーバー側の言語でユーザーのブラウザーを検出し、それに応じてスタイルシートを含めます。
于 2010-01-09T16:51:06.590 に答える
0

ボタンを左にフロートさせるだけで、すべてのブラウザで外観が同じに保たれます。

于 2010-01-09T16:59:41.100 に答える