0

このフィドルのために

http://jsfiddle.net/hNx6E/13/

私が起こっていると私が信じているのは、私が使用していることに気付いていない属性のデフォルトがブラウザごとに異なることです。

HTMLを調べると、これはイライラするbcです。デフォルトは表示できず、属性も表示されません。

ブラウザ、特にFireFoxとSafariのデフォルト属性のリストはありますか？

それはどこにある？

ボタンの高さが2px小さいと予想される場合、ボタンの高さは入力ボックスより2px以上大きくなっています。

ベース、Firefox、Safariの違いは何ですか？

大量のCSSリセットコードでそれらを隠すだけでなく、これらの違いが何であるかを理解する必要があります。

ありがとう

参照：

SO同様の問題-Safari

W3ボックスモデル

4

3 に答える 3

2

ブラウザは独自の行の高さをボタンに適用しています。追加line-height:16px;すると問題が解決します。http://jsfiddle.net/hNx6E/20/

于 2012-07-20T18:35:40.627 に答える
2

幅/高さとパディング/ボーダーを混在させると、ボックスのサイズ変更を試すことができます。ブラウザに幅/高さの値を強制的に取得させます。

http://css-tricks.com/box-sizing/

于 2012-07-20T18:34:35.497 に答える
0

すべてのブラウザーには、最初に CSS RESET を使用してそれらをオーバーライドし、次に私たちに従ってスタイルを設定する必要があるデフォルトのスタイルがいくつかあります。

このコードをスタイルシートの先頭に追加してください

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
于 2012-07-20T18:30:10.507 に答える