そういえばうちではならないなって思ったけど overflowの解釈、間違ってませんか? - WebStudio を見てから text-indent
でふっとばすときは overflow: hidden;
を入れるようにしていたからだった。
変な挙動の CSS に対して「どうしてそうなるのか」も考えないとなぁ。でもさ、今日思ったけど、IE さんは「どうしてそうなるのか」とか考えてやっても、無駄なのよね。
そういえばうちではならないなって思ったけど overflowの解釈、間違ってませんか? - WebStudio を見てから text-indent
でふっとばすときは overflow: hidden;
を入れるようにしていたからだった。
変な挙動の CSS に対して「どうしてそうなるのか」も考えないとなぁ。でもさ、今日思ったけど、IE さんは「どうしてそうなるのか」とか考えてやっても、無駄なのよね。
ブラウザ間のアレなんだから、あんまり CSS 書くこと自体を面倒くさいことにしないほうがいいよね、って思うんだ。
ところで自分が CSS を書くときに気をつけていることを書くよ!
「極力使わない」というのは、どうしてもカスケーディングを維持したいときだけ使う。
* { margin: 0; padding: 0; font-size: 100%; font-weight: normal; font-style: normal; color: inherit; background: transparent; border: none; } a:link { color: #00f; text-decoration: underline; } a:visited { color: #660; text-decoration: underline; } a:hover , a:active { color: #00f; text-decoration: none; } p { margin: 0.5em 1em; } ul { padding: 0 0 0 1em; } ol { padding: 0 0 0 1.5em; } del, ins { background: #efefef; border: 1px solid #ccc; } input, textarea { background: #efefef; border-style: solid; border-color: #060; border-width: 0.2em 0.5em; } /* ここから構造順 */ body { line-height: 1.66; background: #1f2f16 url("/img/left.png") repeat-y 7% 0; color: #fff; margin: 0 0 0 7%; padding: 0 7% 0 50px; } #whole { background: #fff url("/img/right.png") repeat-y right top; color: #000; padding: 20px 55px 0 0; } #top a { display: block; background: url("/img/logo.png") no-repeat left top; width: 500px; height: 100px; margin: 0 0 0 20px; text-indent: -10000px; overflow: hidden; } #navigation { } #navigation ul li { display: inline; padding: 0 0.5em; border-style: solid; border-color: #ccc; border-width: 0 0 0 1px; } #navigation #search-form { position: absolute; top: 0; right: 7%; margin: 1em; } #content { padding: 1em; } #content h2 { font-size: 120%; padding: 1em; background: #ccc; } #footer { color: #ccc; background: #000; }