- ベストアンサー
サファリでfloat: leftで横に並べたら隙間が空いてしまう問題の対処方法
- float: leftで横に並べた画像がサファリで隙間が生じる問題について解決方法を紹介します。
- float: leftで画像を横に並べた場合、サファリでは隙間が生じることがあります。この問題を解決するためには、特定のCSSスタイルを適用する必要があります。
- float: leftで横に並べた画像にサファリで隙間が生じる問題を解決する方法をご紹介します。CSSの修正を行うことで適切な表示ができるようになります。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ちょっとコードとcssに突っ込みどころがやたら多いですが、とりあえずサファリの隙間を消す事だけで考えるとimgとbrの間にある改行を削除すればいいです。 コード内の改行が半角スペース扱いになる事は結構あるので注意しましょう。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTML5版です。 ★brは、通常の文書では登場しないはずです。 ★HTMLには文書構造だけ書くようにすると、先でデザイン変えるときも楽ですし、メンテナンスも容易になります。 <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="ORUKA1951"> <style media="screen"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} header,section,footer{width:90%;min-width:470px;max-width:900px;margin:0 auto;padding:5px;} section section{width:auto;min-width:0px;} /* 色 */ body{background-color:gray;} header,section,footer{background-color:silver;} section section{background-color:white;} /* フロート */ section section ul{margin:1em;padding:0;} section section ul li{list-style:none;margin:0;padding:0;float:left;position:relative;height:150px;} section section ul li p{margin:0;position:absolute;bottom:0;width:100%;background-color:rgba(0,0,0,0.6);color:white;} section section ul:after{content:"";white-space:pre;clear:left;display:block;} --> </style> </head> <body> ＿<header> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</header> ＿<section> ＿＿<h2>見出し</h2> ＿＿<p> ＿＿＿ざっと、見る限り画像リストのようですから、画像リストとしてマークアップしてあります。また、opacityだと文字まで半透明になってしまって画像の地色によったみえにくくなるので背景だけ半透明にしておきました。 ＿＿</p> ＿＿<section> ＿＿＿<ul> ＿＿＿＿<li> ＿＿＿＿＿<img src="./img/img-001.png" width="240" height="150" alt="富士山の写真1"> ＿＿＿＿＿<p>テストテスト１</p> ＿＿＿＿</li> ＿＿＿＿<li> ＿＿＿＿＿<img src="./img/img-002.png" width="240" height="150" alt="富士山の写真2"> ＿＿＿＿＿<p>テストテスト2</p> ＿＿＿＿</li> ＿＿＿＿<li> ＿＿＿＿＿<img src="./img/img-003.png" width="240" height="150" alt="富士山の写真3"> ＿＿＿＿＿<p>テストテスト3</p> ＿＿＿＿</li> ＿＿＿</ul> ＿＿</section> ＿</section> ＿<footer> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</footer> </body> </html>
お礼
有難うございます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
通常はそのようなdivの使い方はしません。HTML5ではさらに厳しくなって 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから NOTE: Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.4 Grouping content — HTML5( http://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-div-element )］より --著者は、 他に適切な要素がないときの最後の最後の手段として div要素を使用することが強く推奨されます。div 要素の代わりにより適切な要素を使うことは、読者にとってはアクセシビリティの向上に、著者にとってメンテナンス性の向上につながります。--- ※HTML4.01でも、『文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』でしたね。 とっても大事なことなので、本題とは関係ないですが念のため さて、原因はいくつか考えられますが、最も可能性が高いのはDOCTYPE宣言によるDOCTYPE スイッチ( https://www.google.co.jp/search?q=DOCTYPE%20%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&hl=ja )でしょう。 下記にどのブラウザも標準モードで動作するように書いたHTMLをあげて起きます。なお、HTMLは、HTML4.01strictです。時代遅れなXHTMLではありません。 『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 ★スタイルシートは、この場合は<head></head>内に書くほうが良いでしょう。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) でチェック済み ★タブは＿に置換してあるので戻す。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- 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:630px;max-width:900px;margin:0 auto;padding:5px;} div.section div.section{width:auto;min-width:0;} /* 色 */ body{background-color:gray;} div.header,div.section,div.footer{background-color:silver;} div.section div.section{background-color:white;} /* フロート */ div.section div.section ul{margin:1em;padding:0;} div.section div.section ul li{list-style:none;margin:0;padding:0;float:left;position:relative;height:150px;} div.section div.section ul li p{margin:0;position:absolute;bottom:0;width:100%;background-color:rgba(0,0,0,0.6);color:white;} div.section div.section ul:after{content:"";white-space:pre;clear:left;display:block;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p> ＿＿＿ざっと、見る限り画像リストのようですから、画像リストとしてマークアップしてあります。また、opacityだと文字まで半透明になってしまって画像の地色によったみえにくくなるので背景だけ半透明にしておきました。 ＿＿</p> ＿＿<div class="section"> ＿＿＿<ul> ＿＿＿＿<li> ＿＿＿＿＿<img src="./img/img-001.png" width="240" height="150" alt="富士山の写真1"> ＿＿＿＿＿<p>テストテスト１</p> ＿＿＿＿</li> ＿＿＿＿<li> ＿＿＿＿＿<img src="./img/img-002.png" width="240" height="150" alt="富士山の写真2"> ＿＿＿＿＿<p>テストテスト2</p> ＿＿＿＿</li> ＿＿＿＿<li> ＿＿＿＿＿<img src="./img/img-003.png" width="240" height="150" alt="富士山の写真3"> ＿＿＿＿＿<p>テストテスト3</p> ＿＿＿＿</li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>
お礼
有難うございます。
お礼
有難うございます。 目的としては、これだと思います。