Eric MeyerのCSSリセットを使用するつもりでしたが、ブラウザー間の違い（inputマージンなど）に遭遇しました。それに基づいて、私はより積極的なアプローチを思いついた：
（これは時代遅れです。この質問の最後にある現在の改訂版を確認し、必要に応じて批判することを忘れないでください）
/* CSS Reset by Hugo Leonardo. Based on Eric Meyer's CSS Reset (just google it). */
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font: inherit;
text-decoration: none;
/* in case "font: inherit" fails (IE7) */
font-family: "times new roman";
font-size: 100%;
font-style: normal;
font-variant: normal;
font-weight: normal;
/* remove this block if you DON'T want to support lame browsers */
}
:before, :after {
content: '';
}
:link, :visited, :hover, :active {
color: inherit;
color: #000; /* for IE7 'inherit' problem (again) */
text-decoration: none;
}
:focus {
outline: 0;
}
ol li, ul li {
list-style: none;
}
table {
/* "collapse" here is because of IE7 (maybe others?). don't remove it as it affects other browsers as well */
border-collapse: collapse;
border-spacing: 0;
}
/* this entire block was copied from Eric Meyer's CSS reset */
/* HTML5 "display" reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
テストしたすべてのブラウザでスムーズに機能しました。
- IE7
- IE8
- Chrome（最新）
- Firefox（最新）
- オペラ（最新）
質問は：誰かがここで何か問題を見ますか？私はCSSがあまり得意ではないと思っているので、これが将来問題になるかどうかはわかりません。
Obs.:このリセットはクロスブラウザの問題のみを対象としています。、、、などinputの要素の一般的な規則に従う必要があります（または従う必要があります！）（例：「テキスト」タイプの場合は、境界線なしでは表示されません！）。後で一般的なスタイルなどを追加します。今のところ、私は物事をリセットし、主要なブラウザ間で同じではない（ほとんど）すべてを取り除きます。acodeinputa
非常に遠くにある問題
セレクターはパフォーマンスの
*問題を引き起こす可能性があります。いくつかの
*ルールを持つセレクターは、要素のいくつかのデフォルトのスタイルを、それらが回復できない方法でオーバーライドします。例：input「送信」タイプののデフォルトスタイル。驚いたことに、
:before, :after { content: ''; }Firefoxの一部の要素が壊れていました。改訂版では
margin: 0、すべての入力要素に設定しようとしました。ほとんどのブラウザは、入力タイプcheckboxと。に対してそれを無視しましたradio。
改訂版
/* CSS Reset by Hugo Leonardo Leão Mota
Based on Eric Meyer's CSS Reset: http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/
Helped by fellows in stackoverflow: http://stackoverflow.com/questions/6892982/is-this-css-reset-okay */
/* resetting style for every visible element except 'ruby' family and form controls
browsers deal with controls (and ruby style) in their own way */
a, abbr, acronym, address, b, big, blockquote, body,
br, caption, cite, code, col, colgroup, dd, del, dfn, div,
dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, hr, html, i,
img, ins, kbd, label, legend, li, noscript, object, ol, p, pre, q, samp,
small, span, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, ul, var {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font: inherit;
text-decoration: none;
/* in case "font: inherit" fails (IE7) */
font-family: "times new roman";
font-size: 100%;
font-style: normal;
font-variant: normal;
font-weight: normal;
/* remove this block if you DON'T want to support lame browsers */
}
/* browsers are free to handle controls but
we can't let them mess up with the other elements */
button, select, textarea,
input[type=text], input[type=password], input[type=submit],
input[type=image], input[type=reset], input[type=button], input[type=file] {
margin: 0;
}
:link, :visited, :hover, :active {
color: inherit;
color: #000; /* for IE7 'inherit' problem (again) */
text-decoration: none;
}
:focus {
outline: 0;
}
ol li, ul li {
list-style: none;
}
table {
/* "border-collapse" here is because of IE7 different behaviour (maybe others?).
don't remove it as it affects other browsers as well */
border-collapse: collapse;
border-spacing: 0;
}
/* the next two blocks were copied from Eric Meyer's CSS reset */
blockquote:before, blockquote:after, q:before, q:after {
content: '';
}
/* HTML5 "display" reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
終わり
さて、リセットを改善しようとすればするほど、マイヤーのcssリセットのように見えたので、私はあきらめてそれを採用しました。うまく動作します：p