CSSリセットをYUI2の古いVerからYUI 3: CSS Resetに変えてしばらくたって、いままで気付かなかったけどbodyの背景関係が困った事になるのね。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"xml:lang="ja"lang="ja"> <head> <meta http-equiv="Content-Type"content="text/html; charset=utf-8" /> <title>乱雑モックアップ｜bodyの背景が途切れるよ(；´Д｀)ｳｳｯ…</title> <meta http-equiv="Content-Style-Type"content="text/css" /> <link rel="stylesheet"type="text/css"href="http://yui.yahooapis.com/3.1.1/build/cssreset/reset-min.css"> <style type="text/css"> body{ background:tomato; }</style> </head> <body> <p>The quick brown fox jumps over the lazy dog.</p> </body> </html> |
最初何が原因かわからなくてブラウザが壊れたかと思った。
色々削っていったら最後にYUI 3: CSS Resetが残って判った。
解決法と原因が以下に書かれてますた
hail2u.net – Weblog – YUI 3: CSS Resetの問題
YUI 3: CSS Resetがhtmlに指定した値を下で上書きでとりあえず解決みたい。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"xml:lang="ja"lang="ja"> <head> <meta http-equiv="Content-Type"content="text/html; charset=utf-8" /> <title>乱雑モックアップ｜bodyの背景が途切れないよヾ(ﾟωﾟ)ﾉ゛</title> <meta http-equiv="Content-Style-Type"content="text/css" /> <link rel="stylesheet"type="text/css"href="http://yui.yahooapis.com/3.1.1/build/cssreset/reset-min.css"> <style type="text/css"> html { background-color:transparent; background-image:none; } body{ background:tomato; }</style> </head> <body> <p>The quick brown fox jumps over the lazy dog.</p> </body> </html> |
1 2 3 4 | html { background-color:transparent; background-image:none; } |
htmlにcolorとbackgroundの指定って必要なのかな?
One thought on “YUI 3: CSS Resetを使うと、bodyの背景が画面全体に広がらない現象にいまさら気づいた。”