YUI 3: CSS Resetを使うと、bodyの背景が画面全体に広がらない現象にいまさら気づいた。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

CSSリセットをYUI2の古いVerからYUI 3: CSS Resetに変えてしばらくたって、いままで気付かなかったけどbodyの背景関係が困った事になるのね。

[html]
<!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>
[/html]

最初何が原因かわからなくてブラウザが壊れたかと思った。
色々削っていったら最後にYUI 3: CSS Resetが残って判った。

解決法と原因が以下に書かれてますた

hail2u.net – Weblog – YUI 3: CSS Resetの問題

YUI 3: CSS Resetがhtmlに指定した値を下で上書きでとりあえず解決みたい。

[html]<!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>
[/html]
[css]
html {
background-color: transparent;
background-image: none;
}
[/css]

htmlにcolorとbackgroundの指定って必要なのかな?

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメント

コメントを残す


You can add images to your comment by clicking here.