24

これは私のCSSコードです。

#wrap {
    width:50em;
    max-width: 94%;
    margin: 0 auto;
    background-color:#fff;  
}

#head {
    width:50em;
    height:10em;
    max-width: 100%;
    margin: 0 auto;
    text-align:center;
    position: relative;
}

#css-table { 
    display: table; 
    margin: 1em auto;
    position: relative;
    width:50em;
    max-width: 100%;            
}

#css-table .col { 
    display: table-cell; 
    width: 20em;
    padding: 0px;
    margin: 0 auto;
}

#css-table .col:nth-child(even) { 
    background: #fff;
}

#css-table .col:nth-child(odd) { 
    background: #fff;
    border-right: 4px double #b5b5b5;
}

そして私のHTMLコード。

<div id="cont">
    <div id="css-table">
        <div class="col">123</div>
        <div class="col">123</div>
    </div>
</div>

Firefoxウィンドウを拡大縮小すると、テーブルは300px幅のビューポートまで縮小されます...私が望むように。ただし、Chromeでは、ビューポートが50emより広い場合にのみテーブルが正常に表示されます。Chromeウィンドウを狭くすると、ラップの右側でテーブルがにじみ出ます。

Chromeがこれを行う理由はありますか？

4

4 に答える 4

24

max-width は block 要素にのみ適用する必要があるため、技術的には Chrome はルールに従っています。

MSDN ドキュメントから:

min-width/max-width 属性は、フローティングおよび絶対配置のブロック要素とインライン ブロック要素、および一部の組み込みコントロールに適用されます。表の行や行/列グループなど、置換されていないインライン要素には適用されません。(「置換された」要素には、img や textArea などの固有の次元があります。)

テーブル (またはあなたの場合は display:table) は、技術的には機能しないか、サポートされるべきではありません。FF は明らかにそれに従っていますが、おそらく別の解決策を考え出す必要があります。

max-width プロパティ

MSDN ドキュメント

于 2012-09-02T02:48:36.863 に答える
7

div を作成し、ブロックを表示するスタイルと最大幅を指定します。トラディショナル<table>を使用して、幅 100% のスタイルにすることもできます。

于 2012-09-02T04:58:14.433 に答える