• ベストアンサー

safariだけ、display:block;の周りの余白を消すことができず困っています

safariだけ、display:block;の周りの余白を消すことができず困っています。 cssでbr{line-height:0;}にしているのですが、safariだけリンクされない余白が間にできてしまいます。ie、firefoxでは大丈夫です。 たくさん調べましたがわかりません。よろしくお願いします。 以下ソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- a{display:block;height:100%;width:100%;line-height:200%;text-decoration: none;} a:hover{background-color:#ffcccc} br{line-height:0;} --> </style> </head> <body> <p> <a href="test">ああああああああああああ</a><br> <a href="test">ああああああああああああ</a><br> <a href="test">ああああああああああああ</a><br> </p> </body> </html>

  • HTML
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

br{display:none;} <br>を使いつつ改行を消すなら、これではダメですか？ インライン要素を並べて表っぽくみせるときによく使ってます。

thiruthiru
質問者

お礼

回答ありがとうございます。うまく表示できました！！

その他の回答 (1)

noname#248942
noname#248942
回答No.1

<a href="test">ああああああああああああ</a><br> <a href="test">ああああああああああああ</a><br> <a href="test">ああああああああああああ</a><br> の<br>を抜いてみたらできました!

thiruthiru
質問者

お礼

回答ありがとうございます。こちらの方法でもうまくできました！！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • html,css初心者です。ヘッダーの余白について

    ヘッダーの余白について教えて下さい。 どうしてもヘッダーの上部分に余白ができてしまいます。 HTMLとCSSをはります。 bodyに色をつけるとヘッダー上部分の余白の色も色がついてしまうので困っています・・・ <!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"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="font.css" type="text/css"> </head> <body> <div id="header"><!--/ #header --> あいうえお </div> </body> <html> CSS #header{ width: 980px; margin: 0 auto; background: #fff; text-align: left; } 宜しくお願いします。

    • ベストアンサー
    • HTML
  • firefox3.5.7,で表示確認済みのcssがsafari4.0.4,で無効状態です。

    初めて書き込みで質問する段階の者です。 ヤフーオークション用ページをhtml内にcssを書いて作成しておりましたが、firefox3.5.7,で表示確認済みのcssがsafari4.0.4,で無効状態です。（ファイルはローカルでデスクトッップに置いてあります。） 調べながらの作業で解決出来ず困っております。 書き方に問題があるはずですが、わかりませんでした。 （未チェックですが、恐らくIE関係も全滅だとは思います。） ひとまずsafariをクリアーできたらと思っておりますので ご存知の方、ご教授お願いします。 <?xml version="1.0" encoding="UTF-8"?> <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>ヤフーオークションページ</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" type="text/css" href="css/import.css" media="all" /> <style type=" text/css"> </style> </head>

    • ベストアンサー
    • Mac
  • SafariでPHPソースがそのまま表示される

    Safariでindex.phpを開くとソースコードがそのまま表示されてしまいます。 拡張子をphpとしているだけでソース内にはphpスクリプトは記述しておりません。 なぜでしょうか？ ※ファイル名をindex.htmlに変えると正しく表示されます。 Windows 7 Home Premium 64bit Safari5.1.5 ソースコードのエンコーディング：utf-8 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <title>テストtitle> </head> <body> <h1>テストページ</h1> </body> </html>

  • HPの文字の大きさを変えるCSSがうまくいきません

    ネット上によく出ているjsやcssを利用した文字サイズを変える方法を、ソースを取り込んでみるのですががうまくできません。 初心者なので、かわかり易く教えていただると助かります。　尚、styleswitcher.jsはダウンロード済です。 ソースは、 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="style1.css" title="style1"> <link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2"> <link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3"> <script type="text/javascript" src="styleswitcher.js"></script> <style type="text/css"> style1.css body {font-size: 100%;} style2.css body {font-size: 80%;} style3.css body {font-size: 120%;} </style> <title></title> </head> <body> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style2'); return false;">サイズ小</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style1'); return false;">サイズ中</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style3'); return false;">サイズ大</a> <br> <br> テスト<br> </body> </html> よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 下記のタグの中で必要ないのはありますか？

    (1)　<?xml version="1.0" encoding="UTF-8"?> (2)　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (3)　<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> (4)　<head> (5)　<title>●●●●●●●●</title> (6)　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> (7)　<meta http-equiv="Content-Style-Type" content="text/css" /> (8)　<meta name="robots" content="INDEX,FOLLOW"> (9)　<meta name="description" content="●●●●●●●●"> (10)　<meta name="keywords" content="●●●●●●●●"> (11)　<meta name="content="●●●●●●●●" /> (12)　<meta http-equiv="Content-Script-Type" content="text/javascript"> (13)　<meta http-equiv="Content-Style-Type" content="text/css"> (14)　<link href="css/A1.css" rel="stylesheet" type="text/css" /> (15)　<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

  • Safariで画像が出ません！

    WinXPにてHPを作っています。 WinではIE7、IE6、NN7、FireFox、Opera MacではIE、FireFox、Opera、Safari で動作・レイアウトの確認をしています。 何故かSafariのみ、以下のタグを入れたページの背景画像が出ず真っ白な画面になってしまいます。 どこに間違いがあるのかさっぱりわからないんです… ご存知の方、教えて頂けるとありがたいです！！ 宜しくお願い致します。 タグ一覧↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <BASE target="_parent"> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Imagetoolbar" content="no"> <meta name="robots" content="noindex, nofollow,noarchive"> <meta name="GOOGLEBOT" content="NOINDEX, NOFOLLOW, NOARCHIVE"> <TITLE>top</TITLE> <STYLE type="text/css"> <!-- BODY{ background-color : black; background-image : url("＊＊＊＊.gif"); background-repeat : no-repeat; background-position:25% 0%; } --> </STYLE> </HEAD> </HTML>

    • 締切済み
    • CSS
  • 背景に指定したイメージ以外の余白を見せないようにする方法は？

    こんにちは！まさにタイトル通りの質問です。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <META NAME=""> <META NAME=""> <META NAME=""> <META NAME=""> <META http-equiv="refresh" content="5;url=test.html"> <SCRIPT LANGUAGE="JavaScript"> <!-- function resizeWindow(){ 　　　　　window.resizeTo(720,580); 　} //--> </SCRIPT> <title>test</title> <style type="text/css"><!-- body { background-repeat:no-repeat;} --></style> </HEAD> <body onLoad="resizeWindow()" background="top4.jpg" width=720 height=580 > </body> </HTML> としていますが、窓を大きくしたりすると右や下に余白が見えてかっこわるいです。どうすれば改善しますか？ お願いします☆

    • ベストアンサー
    • HTML
  • 初歩的な質問で恐縮ですが、教えてください。

    すみませんが、教えてください。 入力フォームでデータが送れなくて、困っています。 下のコードに問題点はあるのでしょうか？ 自分では、分からないので、よろしくお願いいたします。 test1.php------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> </head> <body> <form method="post" enctype="multipart/form-data" action="./test2.php"> <input type="text" name="fmTitle" ><br /> <input type="submit" value="次へ" > </form> </body> test2.php-------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> </head> <body> <?= $fmTitle . "<br />" ?> </body>

    • ベストアンサー
    • PHP
  • safariだけcssが反映されない

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="base.css" type="text/css" media="screen,print" /> <title>あ</title> </head> <body> あ </body> </html> このhtmlはbase.css（以下）を読み込んでいます。 /* CSS Document */ @charset "Shift_JIS"; body { background-image: url(images/bg.jpg); background-repeat: repeat; } fire fox、operaでは背景画像images/bg.jpgが 表示されていますが、safariでは真っ白です。 index.html内に <style type="text/css"> <!-- body { background-image: url(images/bg.jpg); background-repeat: repeat; } --> </style> と記述してしまえば、safariでも当然のように反映されていますが、 これが外部ファイルになると反映されません。 今回の例は、おかしい部分を抽出してみたのですが、 bodyの背景が表示されない、一番上に10pxくらいの空白(マージン? )が生じるという不具合以外、他の要素はsafariでもちゃんと表示されていました。 floatを使ったページはsafariでは背景が表示されないと いう情報を得て、検査するために抽出してゆき、最後には こんなにシンプルになっても障害がとりのぞけないので、 どんな見落としがあるのか、教えて頂けないでしょうか？

    • ベストアンサー
    • HTML
  • ブラウザ上部に余白があります。

    近い現象はありましたが、解決出来なかったのでご質問させて頂きます。 下記のソースでhtmlを制作しましたが、#headerの上に余白があります。 どうすればこの余白をとる事が出来るでしょうか？ お教え頂ければと思います。 ↓ソース↓ <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- html, body{ margin:0; padding:0; } div#header{ background-color: #F00; margin:0px; padding:0px; } --> </style> </head> <body> <div id="header"> <h1>test</h1> </div> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する