- ベストアンサー
Opera7.54のpadding、borderをwidthに含めてしまうバグについて
Internet ExplorerのCSS解釈において、widthやheightにpaddingとborderを加算してしまうことは有名ですが、Opera7.54（Windows版）でもDOCTYPEを宣言せずに、後方互換モード（クイックモード）で作動させた場合同様なことが起こるようなのです。 ところが『CSSバグ辞典スレッドの要約』等を見ても、この余りにも簡単に発見されると思われるOperaのボックスモデル上のバグに関して触れていません。 何らかの設定によって、後方互換モードにおけるOperaのwidth値のレンダリング内容を変えられるのでしょうか？
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- IE6 バグ table td colspan paddingの組み合わせ
Internet Explorer6ではテーブルにCOLSPANが指定されたセルが含まれるとcolspanを含まないセルの幅の指定がずれるというバグがあるようです。 特にこのバグは、テーブルの一段目の行の全てのセルがcolspanで結合され一つのセルになっている場合、顕著に現われるようです。 このバグは、テーブルに含まれる全てのセルにwidthを指定することである程度防げるようですが、全てのセルにwidthを指定しても、一段目のcolspanのあるセルの左右にcssでpaddingを指定しているとそのテーブルのcolspanを含まないセル（一段目以降のセル）の幅がずれてしまいます。 このバグをどのようにして回避するか、ご存知の方はおられますか？ よろしくお願いします。 キャサリン
- ベストアンサー
- HTML
- margin,paddingなどで困ったことがあります。
現在、HPを作っています。 そこで相談なのですが、FirefoxやOpera、IE8、IE8のIE7互換モードなどで表示の違いがありました。 その部分のソースはこちらです <div class="menu"> <span><h4>Link</h4></span> <p><a href="javascript:void(0)">リンク1</a></p> <p><a href="javascript:void(0)">リンク2</a></p> </div> そしてCSSのソース（一部）です。 div.menu{ font-size: 10pt; color: #000000; font-weight: bold; margin: 3px; padding: 4px; border: 4px groove #000000; width: 178px; background-color: #eeeeee; } div.menu span{ display: block; text-align: center; } div.menu h4{ color: #000000; font-size: 26px; padding-bottom: 10px; padding-top: 10px; } このCSSのソースのどこを修正すれば、正しい表示になるでしょうか？ 表示は送付画像のような表示です。
- 締切済み
- HTML
- cssで<div>にpaddingを指定したとき
下のように、ｃｓｓで<div>にwidth720px、padding10px,background-color: #00FFFF;と指定して、 IE6とoperaで表示してみたところ、widthが740px、padding10pxになってしまいます。 divの下に７４０pxのテーブルをおいて確認してみました。 これは、こういうものと、思うしかないのでしょうか？ また、こうなるのは、私だけなのでしょうか？ <style type="text/css"> <!-- #contents { width: 720px; padding: 10px; background-color: #00FFFF; } --> </style> </head> <body> <div id="contents"> あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ </div> <table width="740" border="0"> <tr> <td bgcolor="#0000FF">あ</td> </tr> </table> </body>
- ベストアンサー
- HTML
- Opera、ネスケでcssが崩れます
DreamWeaverMXで作業しています。 ブラウザはLunascape（Netscapeから生まれたもの？）とIE6を使用、確認していましたが、 アップ後にOpera9、Netscape、Mozila Firefox1.5で確認したところ CSSが崩れていることに気づきました。 左右のフロートが崩れており、この回避方法を調べましたが よくわかりません。。。。 過去の教えて！から、下記URLを参考にしましたが それでも理解できません。涙 http://members.at.infoseek.co.jp/cssbug/detail/opera.html http://www.keynavi.net/ja/bugh/index.html どなたか制作に詳しい方、助けてください…！ ---------------------------------------- <link rel="stylesheet" href="web.css" type="text/css" media="screen"> --------------- #body{ margin:auto; width: 700px; padding-top: 0px; } #page{ background:#ffffff 700px; width:700px; font-size:11px; color:#585858; border-right: 1px solid #585858; border-bottom: 1px solid #585858; border-left: 1px solid #CCCCCC; border-top-width: 1px; border-top-style: solid; border-top-color: #CCCCCC; } #left{ width:180px; float:left; text-align:left; padding-top: 5px; padding-right: 5px; padding-left: 5px; background-color: #797979; height: 100%; padding-bottom: 10px; margin-left: 1px; border-top-width: 10px; border-top-style: solid; border-top-color: #FFFFFF; } } #right{ width:480px; text-align:left; float: right; margin-right: 3px; padding: 15px; margin-top: 8px; } --------------------------------
- ベストアンサー
- HTML
- HTML 標準モード 互換モード
HTMLでは<!doctype html>タグを宣言しないとブラウザのレンダリングモードが「互換モード」になってしまうかと思いますが、一方 <!doctype html>タグを宣言すると「標準モード」になると思います。 <!doctype html>があるのとないのとでテキストエディタいじってブラウザの画面の比較を行ったのですが双方の相違点は理解できませんでした。 「標準モード」と 「互換モード」で決定的な違いは何かありますでしょうか？
- ベストアンサー
- HTML
- W3C における、width の解釈に関して
今まで漠然と、CSS でデザインを行ってきました。この際きちんとした知識を得たいと思っています。 今まで float を利用して、経験則的に width で幅を決め段組みのデザインをしてきましたが、W3C 的に間違った解釈をしていないのかと思い始め、下記のサンプルソースを制作してみました。 疑問点は、float を利用してボックスを並べる際の、width の値に関しての考え方です。 W3C で言う標準モードを意識しています。また、IE6 の互換モード等は現時点では配慮していません。純粋に W3C の解釈を知りたいと思います。 -- サンプルソース -- <?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" /> <title>widthの検証</title> <style type="text/css"> <!-- body { background-color: #FEE; } #box { width: 300px; border: 1px solid #00F; margin: 0 auto; background-color: #FFF; } .block { float: left; width: 100px; margin: 0px; padding: 0px; border: 0px solid #F00; background-color: #FFE; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } --> </style> </head> <body> <div id="box" class="clearfix"> <div class="block"> <p>ボックス１</p> </div> <div class="block"> <p>ボックス２</p> </div> <div class="block"> <p>ボックス３</p> </div> </body> </html> -- サンプルソース -- 幅300pxのボックスを作り、その中に100pxのボックスを3個 float: left で並べています。上記のサンプルでは、クラスblockにて margin,padding,border を、0px にしていますが、margin,padding,border でどこか1カ所にでも、0以外の値を与えると3個目のボックスが落ちます。 上記挙動を踏まえて考えると、width の値は純粋にコンテンツのみの値と判断出来ます。 ただ、ネットを検索してみると、W3C 的には pading,border まで含めた値が、width の値だと解説されているページを見受けます。 検証した環境は Mac OS X の環境で、FireFox3.0 と、safari になります。width の値に関しては、単にブラウザの解釈の問題で有り、W3C 的には、width とは、padding,border まで含んだ値が正解なんでしょうか。 出来れば W3Cの原書もしくは、W3Cの和訳が有れば width のリファレンスへのリンクを教えて頂ければと思います。 和訳に関しては http://www.a2ztutorial.com/Style/CSS/ のページを見つけましたが、リファレンスを見つけられませんでした。
- ベストアンサー
- CSS
- MAC版IEのCSS、paddingを適用すると崩れてしまいます。
質問いたします。 下記内容のHTMLを打ちますと、Windows環境では、問題なく左側に余白ができ、右側は何も無く表示されます。ですが、このHTMLをMAC版IEで表示させますと、右側にも余白が表示され、レイアウトが崩れてしまいます。何か、MAC版IEのバグでしょうか？誰か解る方、アドバイスを頂けると、助かります。 それでは、よろしくお願いします。m(__)m <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>実験用</title> <style type="text/css"> <!-- .padding { font-family: "ＭＳ Ｐゴシック", "Osaka"; font-size: 14px; padding-left: 40px; text-align: left; } --> </style> </head> <body bgcolor="#666666" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div align="center"> <table width="500" height="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr> <td> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td class="padding">ながいながい文章を入力して、CSSのpadding-leftで制御をした場合、左側にしかpaddingの設定をしていないのに、右側にも余白が適用されてしまいます。何故でしょうか？</td> </tr> </table> </td> </tr> </table> </div> </body> </html>
- ベストアンサー
- HTML
- table要素のwidthの解釈
tableタグを使って次のようなことをしたいと考えています。 ・table要素の親はdiv要素 ・div要素にはサイズ(width/height)が指定されており、overflow:hiddenとしてある。 ・table要素にはサイズを指定しない ・td要素にはサイズを指定する →つまり、tableのサイズはtdのサイズで決定する HTML/CSSは次の通りです。 ----------------------------------------------------- div { width: 300px; overflow: hidden; } table { table-layout: fixed; } td { width: 170px; } <div> <table><tr> <td>a</td><td>b</td><td>c</td> </tr></table> </div> ----------------------------------------------------- このコードを「DOCTYPE宣言を書かずに」IE8で開くと、想定通りの表示になりますが、 <!DOCTYPE html>と記述すると、tableの横幅が300pxに詰められてしまいます。 td要素のwidth指定が働かず、親のdiv要素のwidthに無理やり押し込められてしまうようです。 また、FirefoxではDOCTYPE宣言無しでも同様の問題が起きてしまいます。 table内の列数は固定ではないので、tableに対してwidth指定はしたくありません。 何か書き方が間違っているのでしょうか。 あるいは、標準準拠モードの仕様では、そもそもできないことをやろうとしているのでしょうか。
- 締切済み
- HTML
- DIV内の padding について
下記のようなCSSとHTMLファイルにてデザインをしています。 main 内にてpaddingを上下左右に10px 有効にしたいのですが、下記のような記述をCSSにした場合、padding が top (bottom?)にしか適用されません。左右に適用させるにはどうすればよいのでしょうか？ よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <head> <link rel="stylesheet" media="all" type="text/css" href="index.css" /> </head> <body> <div id=wrapper> <div id=header></div> <div id=face></div> <div id=navi></div> <div id=main></div> <div id=footer></div> </div> </body> </html> body { background: url(img/bg.gif); margin: 0 auto; text-align: center; } #wrapper { width: 800; margin: 0 auto; background: #EEE; } #header { clear: both; height: 50px; text-align: left; background: #009 url(img/header.gif) no-repeat; border-bottom: 1px solid #FFF; } #face { clear: both; height: 200px; text-align: left; background: url(img/face.jpg) no-repeat; border-bottom: 1px solid #FFF; } #navi { float: left; width: 130px; height: 550px; background: #009; text-align: center; border-right: 1px solid #FFF; } #main { font-family: Maiandra GD, Verdana, Arial; font-size: 14px; line-height: 20px; text-align: left; padding: 10px; } #footer { clear: both; height: 50px; background: #009 url(img/footer.gif) no-repeat; border-top: 1px solid #FFF; }
- ベストアンサー
- HTML
- DOCTYPE宣言について
DOCTYPE宣言について DOCTYPE宣言よりも前に文字を入れると後方互換モードになってしまうとありますが、XML宣言をしたい場合はどうしたらいいのでしょうか？ XML宣言はしないほうがいいのでしょうか？
- ベストアンサー
- HTML
お礼
なるほど。ありがとうございました。 width値のレンダリングに関して、敢えて後方互換に「している」ということなのですね。納得です。 無理にIE5.5の互換にする必要もないかとも思いますが、そのシェアの大きさ故に互換性を確保したのでしょうね。