Question

ウェブサイトはこちらです。http://www.cambodia-massage.com。はてなブログを利用してます。 IEでは正しい表記となるのですが、クロームやiosでみると、最後の「出張マッサージ」の項目が半分ずれてしまいます。修正方法教えてください。よろしくお願いいたします。ヘッダー

ORUKA1951 · Accepted Answer

スタイルシート部分の間に挿入
★800px幅以上ならOK
　ウィンドウ幅を変えてみる。
★HTMLもCSSもメンテナンス性、SEOを重視してある。
★http: はhttp：に置換してあるので戻す。

<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:790px;max-width:900px;margin:0 auto;padding:5px;}
div.header{
background:black url(http：//cdn-ak.f.st-hatena.com/images/fotolife/j/japanesemassagemasa/20141102/20141102131729.png) center center;
color:white;
}
div.header{text-align:center;}
h1{margin:60px 5px 0px 5px;}
p{margin:0;font-weight:bold;}
div.header div.nav{width:100%;}
div.header p{margin-bottom:40px;}
div.header div.nav ul,
div.header div.nav ul li{
margin:0;padding:0;
height:48px;
}
div.header div.nav ul{
line-height:48px;
list-style-type:none;
font-size:0;
width:100%;
border-bottom:gray 1px solid;
position:relative;
bottom:-5px;
}
div.header div.nav ul li{
display:inline;
font-size:12px;
}
div.header div.nav ul li a{
display:inline-block;
height:100%;width:100%;
background-size:cover;
overflow:hidden;
text-indent:-100em;
}
div.header div.grobal.nav{height:30px;position:absolute;top:0;left:0;background-color:black;}

div.header div.nav ul li a[title="Home"]{
width:16.25%;
background-image:url(http：//cdn-ak.f.st-hatena.com/images/fotolife/j/japanesemassagemasa/20150415/20150415160627.png);
}
div.header div.nav ul li a[title="Menue"]{
background-image:url(http：//cdn-ak.f.st-hatena.com/images/fotolife/j/japanesemassagemasa/20150415/20150415164137.png);
width:17.5%;
}
div.header div.nav ul li a[title="Location"]{
background-image:url(http：//cdn-ak.f.st-hatena.com/images/fotolife/j/japanesemassagemasa/20150415/20150415164136.png);
width:23.1%;
}
div.header div.nav ul li a[title="Reservation"]{
background-image:url(http：//cdn-ak.f.st-hatena.com/images/fotolife/j/japanesemassagemasa/20150415/20150415165803.png);
width:24.8%;
}
div.header div.nav ul li a[title="Staff"]{
background-image:url(http：//cdn-ak.f.st-hatena.com/images/fotolife/j/japanesemassagemasa/20150415/20150415164138.png);
width:18.3%;
}

div.header div.nav ul li a[title="Garary"]{
background-image:url(http：//cdn-ak.f.st-hatena.com/images/fotolife/j/japanesemassagemasa/20150428/20150428001729.png);
width:25.1%;
}
div.header div.nav ul li a[title="FeedBack"]{
background-image:url(http：//cdn-ak.f.st-hatena.com/images/fotolife/j/japanesemassagemasa/20150428/20150428001727.png);
width:32.1%;
}
div.header div.nav ul li a[title="HouseMassageService"]{
background-image:url(http：//cdn-ak.f.st-hatena.com/images/fotolife/j/japanesemassagemasa/20150428/20150428001732.png);
width:42.7%;

ORUKA1951 · Answer

＞IEでは正しい表記となるのですが、クロームやiosでみると、
　逆ですよ。IEが互換表示で誤った表示になるのです。
　ウェブ作成されているなら、開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )も豊富で、最もウェブ標準に近いfirefoxを使割れていると思いますが、firefoxでも動揺になるはずです。
★DOCTYPE宣言を、どのブラウザも標準で起動するよう指定する。

いまから出かけますので・・

ORUKA1951 · Answer

>★DOCTYPE宣言を、どのブラウザも標準で起動するよう指定する。　⇒DOCTYPEスイッチ－HTMLの基本( http://www.htmq.com/htmlkihon/302.shtml ) 　⇒HTMLのDOCTYPEスイッチとCSS（標準モードと互換モード）：スタイルシート（CSS）辞典 - HTMLタグボード( http://www.dspt.net/stylesheet_css/001/011.html ) 　示されたHTMLを見ると、XHTML1.0 transitinal じゃないかと。 1999年以来、『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』ですので、HTML4.01strict（または、HTML1.1strictないしXHTML1.1）　で作成することを強く薦めます。　XHTML1.0transitinalは、strictではありません。XHTMLはいずれ使われなくなりますので、簡単なHTML4.01strictないし、HTML5がよろしいでしょう。　そのうえで Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html ) 　で文法チェックをしてから正しいことを確認してスタイルシートを書きましょう。　HTMLが間違っているとブラウザによって補完の方法が異なるために差が出ます。上記HTMLは単純に　

ORUKA1951 · Answer

時間が取れないので、ごく簡単なサンプル ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html ) 　で検証済みHTML4.01strict + CSS2.1 ★タブは＿に置換してあるので戻す。＿＿サンプル＿＿＿＿＿＿＿

＿＿

見出し

＿＿

本文はsection

＿＿

＿＿＿

項見出し

＿＿＿

本文項記事

＿＿＿

sectionの階層でレベルが判断される

＿＿

＿

<至急＞IEとその他ブラウザで表記がズレてしまいます！修正方法教えてください！

＞IEでは正しい表記となるのですが、クロームやiosでみると、

>★DOCTYPE宣言を、どのブラウザも標準で起動するよう指定する。

時間が取れないので、ごく簡単なサンプル

スタイルシート部分の間に挿入

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング