operaとIEの違い
-
0 名前： しん ： 2006/02/25 18:33
- 今alphaEDITというソフトでＨＰを作っているのですが、ＩＥではきちんと
表示されるのですが、operaだと、tableの色がうまく表示されなかったり
します。
どうしたらいいか誰かわかりますか？？
-
1 名前： カヅサツ ： 2006/02/25 18:33
- HTMLやCSSの記述が間違っている（妥当でない）可能性があります。IE と Opera でエラー補完の方法が異なるところがあるため、表示が違って見えることもあります。この場合は、適切な HTMLあるいは CSS に直す必要があります。
間違っていない、あるいは正しく修正した結果でも、ブラウザのバグによって表示が異なる場合があります。この時は、何らかのブラウザ固有対策を打つしかありませんが、「悪いのはブラウザである」と切って捨ててもそれはそれで良いかもしれません（ちなみに IE の方がバグは多いです）。
いずれにせよ、該当のページの URL がわからないと、検証ができません。
-
2 名前： しん ： 2006/02/25 18:33 ［URL］
- あっ、申し訳ないです。。。
ＵＲＬのせましたので、チェックしてもらえますか？？
-
3 名前： カヅサツ ： 2006/02/25 18:33 ［URL］
- HTMLに、かなり無駄のある記述が多いです。IE独自拡張も散見されます。
・tableを「表」以外の目的で使うなど、論理要素の意味を無視してレイアウト目的に使うのは、なるべく避けましょう
・文書構造上、適切な要素を使うようにしましょう。見出しは h1〜h6、段落は p、箇条書きは li です。
・fontやbgcolorなどの物理要素・物理属性を使わず、CSSに任せると管理が楽になります。
・サンプルでは style要素内に CSS を書きましたが、外部ファイルにすれば、複数の HTMLに統一したレイアウトを与える時に便利です。
・適度に文法チェックをしましょう http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<title>おすすめリンク集 / いっちっち</title>
<style type="text/css">
body{
color: #black;
background-color: #ffffb5;
padding-left: 80px;
}
/* 見出し */
h1{
text-align: center;
}
h2{
text-align: center;
margin: 3em 0em 1em 0em;
clear: both;
}
/* 強調 */
em{
font-weight: bold;
font-style: normal;
}
/* 謎ブロック */
#nazo01{
margin: 1em auto 1em auto;
padding: 1px 1px 1px 1px;
width: 760px;
height: 63px;
border-width: 3px 3px 3px 3px;
border-style: outset;
border-color: #CCC;
}
/* パンくずリスト */
p.BreadcrumbsList{
font-size: small;
border-width: 0px 0px 4px 0px;
border-style: solid;
border-color: #ff8040;
}
p.BreadcrumbsList a:link,
p.BreadcrumbsList a:visited{
color: #80ff80;
background-color: transparent;
font-weight: bold;
}
/* メインコンテンツ */
#main{
margin: 0px auto 0px auto;
width: 75%;
}
/* メニュー */
ul.menu{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}
ul.menu li{
margin: 0px 0px 0.5em 0px;
width: 40%;
float: left;
}
/* リンク表 */
table.link{
border-width: 4px 4px 4px 4px;
border-style: solid;
border-color: #ff8040;
border-collapse: collapse;
width: 100%;
}
table.link th{
text-align: left;
font-size: large;
border-width: 2px 2px 2px 2px;
border-style: solid;
border-color: #ff8040;
padding: 2px 2px 2px 2px;
width: 20%;
}
table.link td{
border-width: 2px;
border-style: solid;
border-color: #ff8040;
padding: 2px 2px 2px 2px;
width: 80%;
}
</style>
</head>
(続く)
-
4 名前： カヅサツ ： 2006/02/25 18:33 ［URL］
- <body>
<!-- 謎ブロック -->
<div id="nazo01">
<p>なんのためのブロックか不明なので、id属性値は適当</p>
</div>
<!-- パンくずリスト -->
<p class="BreadcrumbsList"><a href="">トップ</a>＞<em>おすすめリンク集</em></p>
<!-- メインコンテンツ -->
<div id="main">
<h1>おすすめリンク集</h1>
<!-- メニュー -->
<ul class="menu">
<li>@<a href="#SEARCH">検索サイト</a></li>
<li>@<a href="#TEST">市大関係</a></li>
<li>@<a href="">便利サイト</a></li>
<li>@<a href="">生協</a></li>
<li>@<a href="">学習</a></li>
<li>@<a href="">他大学へのリンク</a></li>
<li>@<a href="">メール</a></li>
</ul>
<h2 id="SEARCH">〜検索サイト〜</h2>
<table class="link" summary="検索サイトリンク集">
<tbody>
<tr>
<th>@<a href="http://yahoo.co.jp"
target="_blank">Yahoo!Japan</a></th>
<td>有名でたいていの人が見てる検索エンジン☆</td>
</tr>
<tr>
<th>@<a href="http://www.google.co.jp/"
target=_blank>Google</a></th>
<td>詳しく調べたいならココ!!</td>
</tr>
</tbody>
</table>
<h2 id="TEST">〜〜</h2>
<table class="link" summary="検索サイトリンク集">
<tbody>
<tr>
<th>@<a href=""
target="_blank">リンク</a></th>
<td>コメント</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
-
5 名前： しん ： 2006/02/25 18:33 ［URL］
- ほんまありがとうございます。
いろいろすみません。。。
もっと勉強していこうと思います。
ありがとうございました!!
