web-dev-qa-db-ja.com

Chrome、表の最大幅を無視するSafari

次のようなHTMLコードがあります。

<!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=windows-1251" /> 
    <title></title> 
    </head> 

    <body> 
       <table style="width:100%;"> 
          <tr> 
             <td> 
                <table style="width:100%; max-width:1000px; background:#000099;"> 
                       <tr> 
                           <td> 
                               001 
                           </td> 
                       </tr> 
                   </table> 
               </td> 
           </tr> 
       </table> 
    </body> 
    </html>

問題は、ChromeとSafariが"max-width:1000px"私の友人は、"display:block"は内部テーブル用であり、何らかの形で機能しています。

だから、私が知りたいのは-この問題を解決する他の方法はありますか、なぜこれが起こっていますか？

htmlgoogle-chromesafariscaling
72
GaGar1n

最大幅は ブロック要素 に適用されます。 <table>も blocknorinline でもありません。あいまいなの？ハハ。 display:block; max-width:1000pxを使用して、width:100%を忘れることができます。 ChromeとSafariはルールに従います！

2017年5月編集：このコメントは7年前（2010年！）に作成されました。私は、ブラウザーが長年にわたって多くのことを変えてきたのではないかと思っています（私は知りません、私はもはやWebデザインをしません）。最新のソリューションを使用することをお勧めします。

86
Jason

私はこれがしばらくの間、回避策で回答されていることを知っていますが、max-widthはブロック要素にのみ適用され、仕様ではないソースの引用は完全に間違っています。

spec （CSS Intrinsic＆Extrinsic Sizingの CSS 3仕様 は、このルールのCSS 2.1仕様を指します）は明確に述べています：

非置換インライン要素、テーブル行、および行グループを除くすべての要素

つまり、テーブル要素に適用する必要があります。

これは、WebKitがmax-widthまたはmin-widthテーブル要素の不正です。

31
dustinwilson

ここであなたが探しているものは次のとおりです：

table-layout: fixed

このスタイルをテーブルに適用すると、テーブルは割り当てた幅を尊重します。

注：このスタイルをChromeに直接適用すると、機能していないように見えます。 CSS / HTMLファイルにスタイルを適用し、ページを更新する必要があります。

25
Serj Sagan

内部テーブルをdivでラップし、max-widthをこのラップdivに設定します。

8
Jan Mazánek

同じ問題がありました。コンテンツをページの中央に配置する手段としてテーブルを使用しましたが、safariはテーブルに適用するスタイルとしてwidth:100%; max-width:1200pxを無視しました。テーブルをdivでラップし、divのautoに左右のマージンを設定すると、ページの中央に配置され、macのsafariおよびfirefoxの最大および最小幅の属性に従うことを学びました。エクスプローラーまたはchrome Windowsではまだ確認していません。例を示します。

<div style="position:relative; width:100%; max-width:1200px; min-width:800px; margin-left:auto; margin-right:auto">

次に、div内にテーブルをネストしました...

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
6
Cliff

私はちょうどこの答えに出会いましたが、MDN（ https://developer.mozilla.org/en-US/docs/Web/CSS/max-width ）によると、それらの互換性に注目する価値があります最大幅の表は言う：

|             Feature  | Chrome        | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
--------------------------------------------------------------------------------------------------------
|applies to <table> [1]| Not supported | (Yes)           | Not supported     | (Yes) | Not supported   |

「[1] CSS 2.1は明示的にmax-widthの動作を未定義のままにします。したがって、動作はCSS2.1に準拠しています。新しいCSS仕様ではこの動作を定義できるため、Web開発者は特定の動作に依存すべきではありません」

MDNには「fill-available」や「fit-content」などのクールなものがあります-仕様が安定し、この面で明示されている場合、楽しみにしています...

1
jcuenod

メディアクエリに関する問題を修正できました。

交換しました

max-width: 360px

と

@media (min-width: 440px) {
    width: 360px;
}
0
user2908392

以下に明確なリファレンスを示します。 10視覚化モデルの詳細（w3.org）

CSS 2.1では、「最小幅」と「最大幅」の影響テーブル上、インラインテーブル、テーブルセル、テーブル列、列グループ未定義。

このスレッドで以前に与えられた参照は、誤って「テーブル行」を「テーブル」と読みました。しかし、これは本当に「テーブル」と言います。これはCSS2の一部ですが、CSS3はmax-widthの基礎としてCSS2を参照します。

だから、それは未定義であり、ブラウザは彼らが望むことを自由に行うことができ、それに頼ることは安全ではありません。

0
Hibou57