空白の使用時にSafari / WebKitテーブルがオーバーランする：nowrap

StackOverflow https://stackoverflow.com/questions/211550

  •  03-07-2019
  •  | 
  •  

質問

Safariで奇妙なレンダリングの問題がある：

div内にテーブルがあります。テーブル内<！> lt; td <！> gt;たくさんのdivが左に浮かんでいます。したがって、通常の表示は、td内のすべてのdivが、幅いっぱいになるまで左に積み上げられ、次の行に流れるなどです。このように：

|===========================|
|  |---------------------|  |
|  | XXX  XXX  XXX  XXX  |  |
|  | XXX  XXX            |  |
|  |                     |  |
|  |----------------------  |
|===========================|

これは、safari / webkitを除くすべてのブラウザーで機能します。safari/ webkitでは、次のようになります。

|===========================|
|  |-------------------------------|
|  | XXX  XXX  XXX  XXX  XXX  XXX  |
|  |                               |
|  |-------------------------------|
|===========================|

更新：最後に問題を見つけました：私の内部div（<！> quot; XXX <！> quot; s）にはwhite-space: nowrapがありました。どうやらwebkitは、div内にnowrapを適用するのではなく、divのリスト全体をラップしていなかったようです。

それは厄介なものでした。

（これはdisplay：noneとは関係ありませんでした）

役に立ちましたか？

解決

自分の質問に答える：

問題を最終的に把握しました：私の内部div（<！> quot; XXX <！> quot; s）には空白が含まれていました：nowrap。どうやらwebkitは、div内にnowrapを適用するのではなく、divのリスト全体をラップしませんでした。

それは厄介なものでした。

（これはdisplay：noneとは関係ありませんでした）

他のヒント

実際、上記の質問を個別に尋ねたところ、大きな男の子のような解決策が見つかりました：

white-space：nowrapを使用する代わりに、この場合はdisplay：inline-blockを使用する方が適切です。

CSSは変更に合わせてあちこちで適応させる必要がありますが、期待どおりに機能します。

nowrapの要素がスタックするWebKitの隣接する要素へ

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top