dポイントプレゼントキャンペーン実施中！

float: leftで横に並べたら、サファリだけ

解決済

  • 質問者：webuser
  • 質問日時：
  • 回答数：3件

float: leftで横に並べたら、サファリだけ隙間が空いてしまいます。
ＩＥやファイヤーフォックスではピッタリ表示できています。


問題の箇所は以下です。

<div style="float: left;">
<p style="position: relative;">
<img src="./img/img-001.png" width="240" height="150" />
<br />
<span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト１</span>
</p>
</div>

<div style="float: left;">
<p style="position: relative;">
<img src="./img/img-002.png" width="240" height="150" />
<br />
<span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト２</span>
</p>
</div>

<div style="float: left;">
<p style="position: relative;">
<img src="./img/img-003.png" width="240" height="150" />
<br />
<span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト３</span>
</p>
</div>

どうすればサファリの隙間を消せるでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： tkmojo
  • 回答日時：

ちょっとコードとcssに突っ込みどころがやたら多いですが、とりあえずサファリの隙間を消す事だけで考えるとimgとbrの間にある改行を削除すればいいです。


コード内の改行が半角スペース扱いになる事は結構あるので注意しましょう。
    • good
    • 0
    • 件
通報する
この回答へのお礼

有難うございます。
目的としては、これだと思います。

通報する
お礼日時：2014/12/23 09:10

No.2

  • 回答者： ORUKA1951
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

有難うございます。

通報する
お礼日時：2014/12/23 09:09

No.1

  • 回答者： ORUKA1951
  • 回答日時：

通常はそのような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/gro … )］より
　--著者は、 他に適切な要素がないときの最後の最後の手段として div要素を使用することが強く推奨されます。div 要素の代わりにより適切な要素を使うことは、読者にとってはアクセシビリティの向上に、著者にとってメンテナンス性の向上につながります。---
※HTML4.01でも、『文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』でしたね。
　とっても大事なことなので、本題とは関係ないですが念のため

　さて、原因はいくつか考えられますが、最も可能性が高いのはDOCTYPE宣言によるDOCTYPE スイッチ( https://www.google.co.jp/search?q=DOCTYPE%20%E3% … )でしょう。

　下記にどのブラウザも標準モードで動作するように書いたHTMLをあげて起きます。なお、HTMLは、HTML4.01strictです。時代遅れなXHTMLではありません。
『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
★スタイルシートは、この場合は<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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

有難うございます。

通報する
お礼日時：2014/12/23 09:09

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

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

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

おすすめ情報