- PR -

Firefoxによるhr要素の表示について

参照元記事 | 同じ記事を参照しているスレッド一覧
1
投稿者投稿内容
kenjikana
会議室デビュー日: 2007/07/24
投稿数: 3
投稿日時: 2007-07-24 02:08
環境：WindowsXP　Professional sp2
ブラウザ：IE6.0.29 ,Firefox2.0.0.5
いつもお世話になっております
現在javascriptの勉強中なのですが以下の現象で悩んでおります
下記のソースを実行するとIEでは1行目と2行目の間にhr要素により水平線が正しくひかれますが、Firefoxでは2行目の文字の上に水平線がひかれます。

<!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" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css; charset=UTF-8" />
<meta http-equiv="content-script-type" content="text/javascript; charset=UTF-8" />
<title>test</title>
<style type="text/css"><!--

body{
margin:0;
padding:0;
background-color:#fff;
}

--></style>
<script type="text/javascript">
window.onload = function(){
obj = document.createElement("hr");
obj.id = "hrr";
obj.style.position = "absolute";
obj.style.top = "16px";
obj.style.width = "500px";
obj.style.borderStyle="solid";
obj.style.borderColor="#c00"
obj.style.borderWidth="1px 0 0 0";
obj.style.height="1px";
obj.style.color = "#c00";
obj.style.backgroundColor = "#ddddff";
obj.style.zIndex = 2;
objTxt = document.getElementById("txt");
document.body.insertBefore(obj,objTxt);
objTxt.style.backgroundColor = "#ddddff";
objTxt.style.position = "absolute";
objTxt.style.width = "500px";
objTxt.style.height = "550px";
objTxt.style.fontSize = "16px";
objTxt.style.lineHeight = "18px";
objTxt.style.zIndex = 1;
}
</script>
<body>
<div id="txt">
同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数同じ内容のデータを複数
</div>
</body>
</html>

色々調べてみたのですが、対策方法がわかりません。
実際にやりたいことはこのh4要素をキーボードの「↓」「↑」で移動させてどこまで読んでいるか分かりやすいようにできたらなと思っています。
もし対策方法が分かる方いらっしゃいましたらご教授ください。



kenjikana
会議室デビュー日: 2007/07/24
投稿数: 3
投稿日時: 2007-07-24 14:05
自己解決しました。
bodyで指定していたmarginとpaddingの初期化を全称セレクタ（*）で行うようにしたら正しく表示されました。
* {
margin:0;
padding:0;
}
ありがとうございました。
ひろ@ya
大ベテラン
会議室デビュー日: 2006/02/23
投稿数: 168
投稿日時: 2007-07-25 09:11
http://www.mozilla.gr.jp/standards/webtips0003.html
も参考にどうぞ。
mio
ぬし
会議室デビュー日: 2005/08/25
投稿数: 734
お住まい・勤務地: 神奈川県
投稿日時: 2007-07-25 10:19
hrは各ブラウザで同じ表示になることが期待できない要素なので、こだわるなら画像等で表現するしかないですね。

全称セレクタでpadding:0ですが、Firefoxのoptionの、右側が切れませんかね？
以前わざわざそれで、全称をやめたことがありますが。

細かいところでは、obj.style等を一時変数に収めてアクセスするほうが良いですね。
kenjikana
会議室デビュー日: 2007/07/24
投稿数: 3
投稿日時: 2007-07-25 22:52
ひろ@yaさん、mioさん返信ありがとうございます
今回はjavascriptの勉強ということで作ってみたのですがhr要素は色々問題がありそうです
実際の業務では使わないようにします。
＞全称セレクタでpadding:0ですが、Firefoxのoptionの、右側が切れませんかね？
上記の件ですがFirefoxのoptionの右側がどの位置かわからなかったのですが、見た目的には問題なく表示できています。
しかし、初期化については色々な問題があるようですね。
YUIのCSS-RESETやFONT-RESETも使用してみたのですがうまくいかない時もありますね。ある程度はあきらめるしかないのかなと最近は思うようにしています。

>細かいところでは、obj.style等を一時変数に収めてアクセスするほうが良いですね。
上記の件は、これからは気をつけたいと思います。
本当にありがとうございました。
1

スキルアップ／キャリアアップ（JOB@IT）