締切済み

chromeでmargin:0 autoが効かない

2014/07/03 13:30

いつもお世話になっております。よろしくお願いいたします。 wrapperのセンタリングがchromeで"のみ"出来ません。スタイルシートの1行目に * {margin:0 auto;} と指定し、IE、FFでは問題なくセンタリングが行われています。 chromeでは更に、開発ツール上でwrapperに対してmarginを指定してやると正しくセンタリングが行われます。ところが改めてスタイルシート上で同様にwrapperに対して marginを指定してもセンタリングされないのです。これは一体どうしたことなのか・・・何が邪魔をしているのでしょう。また、リロードを繰り返すと何度かに一度センタリングされることがあります。その逆で、一見正しくセンタリングされているように見えてもリロードを実行するとセンタリングが解除されることもあります。 javascriptを外してみても結局は変わりませんでした。ご存知の方、是非ともご教示頂ければと思います。よろしくお願いいたします。

ninnikutips
お礼率50% (56/110)

CSS
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/07/03 19:57 回答No.2

私は経験ないです。 * {margin:0 auto;} こんなことしません。そもそもmargin:0;pdding:0;はセンタリングには関係ないです。マージンは外のpaddingは内側の余白　*は全称セレクタで詳細度は0ですが、カスケーディングの仕組み上、デフォルトのすべての要素のmargin,paddinを0にしてしまいます。　そのため、本来は存在するはずのすべての要素のmargin,paddingを再度、すべて書き加えなければならなくなります。blockqutte,ol,ul,dl,li・・などすべて登場するたび再設定なんて無駄はしない!! 5.3 全称セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html#universal-selector ) 6.4 カスケード処理( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html#cascade ) 5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) 6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html ) 　はスタイルシートを利用するときの基本ですので、これだけは完璧に理解しておくこと。プロパティとか算出値などは、必要なとき見ればよい。たぶん、原因は違うところにあります。サンプル・・・とっても単純なサンプルです ★タブは＿に置換してあるので戻す。 ★のDATAで検証済みのHTML4.01strict ★IE7以降、firefox,Opera,Googlechrome,Safariなどすべてで同じになるはず　とはいっても　　IE5,5.5ではセンタリングされない　　IE6以前ではnav,asideが低いまま　で使用には差し支えないはずです。 <!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">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<div class="section"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</div> ＿＿<div class="nav" id="contentTable"> ＿＿＿<h3>目次</h3> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h3>チェックすべきこと</h3> ＿＿＿<ol> ＿＿＿＿<li>DTDはstrictであるか</li> ＿＿＿＿<li>DOCTYPEは標準モードで動作するよう適切に書かれているか</li> ＿＿＿</ol> ＿＿＿<p> ＿＿＿＿基本的にこれだけを守っておけば、現行のブラウザでの差は出ないはずです。＿＿＿</p> ＿＿</div> ＿＿<div class="nav" id="contentTable"> ＿＿＿<h3>目次</h3> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>補足</h3> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistory"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2014-07-02</dd> ＿＿</dl> ＿</div> </body> </html>

tkmojo
ベストアンサー率50% (105/207)

2014/07/03 19:21 回答No.1

wrapperって何でしょうか？ <div id="wrapper"></div>って事ですか？普通は*にmargin:0 auto;を入れるなんて無茶苦茶な事はしないと思いますが、例それをしたとしても別に問題は起こりません。シンプルに、下記の様なソースを書いたとしましょう。 ■html body内 <div id="wrapper"> test </div> ■css *{ margin:0 auto; } #wrapper{ width:500px; background-color:#999; } ※視覚的にわかりやすいよう、背景色を入れてます。 ※marginのautoは横幅を指定したブロック要素にしか効かないのでwidthも入れてます。これは後方互換モードのIE6を除き、どのブラウザでも同じように表示されます。（ボックスは中央配置、テキストは左寄せ）よって、*{margin:0 auto;}自体には問題は無く、意図通りの表示にならないのは*{margin:0 auto;}の記述以外が原因です。ですので質問文では情報が足りません。例えばcssファイルの記述を半分消して各ブラウザでどうなってるか確認する、等の部分的なチェックをしつつ絞り込んでいけば自ずと原因の記述がわかるはずです。（cssが問題なんだったら） IEはさておき、ChromeとFFで表示が異なるというのは結構異常な事なので、サイト全体的におかしなことになっている可能性があります。おかしな指定をしているか、html文書内でタグがてれこになってるとか… htmlの記述ミスはこういったサイトでチェックできます。 http://cetus.sakura.ne.jp/htmllint/htmllint.html http://www.htmllint.net/html-lint/htmllint.html 上で*{margin:0 auto;}自体には問題は無い、と書きましたが、問題が無いわけではなく全ての要素に対してmargin:0 auto;が指定されているので、レイアウトが非常にやりにくくなるはずです。状況の把握不足に陥り、自分でも何が何だかわからないcssの指定をやりまくっているんじゃないかと思いますね。