3

私は Safari のバグと思われるものに遭遇しました。この結果がなぜ起こっているのか、誰かが明らかにできるのではないかと考えていました。以下に非常に簡単な例を含めましたが、基本的に私の問題はこれです。幅 300 ピクセル、高さ 80 ピクセルの子要素があり、幅 0 ピクセルの親にネストされた this 子要素と非表示のオーバーフローがあります。これら 2 つの要素は、幅が設定されていないコンテナーにラップされ、3 つの要素はすべて左にフロートされます。コンテンツは親によって隠されていますが、両方をラップしているコンテナは「隠された」子の全幅を拡張しています。Safari を除くすべてのブラウザーでうまく機能しますが、その理由はわかりません。

概要: 幅: 0px; およびオーバーフロー: 非表示; サファリでは動かない

<html>
<head>
<title></title>
<style type="text/css">
   #container {background: rgba(0,0,255,1); float: left;}
   #block {width: 0px; background: rgba(255,0,0,0.50); float: left; overflow: hidden;}
   #content {width: 300px; height: 80px; background: rgba(0,255,0,0.50);}
</style>
</head>
<body>
<div id="container">
   <div id="block">
      <div id="content"></div>
   </div>
</div>
</body>
</html>
4

3 に答える 3

4

特定の表示値は、Safari でバグが発生する場所のようです。

多くの試行錯誤の後、良い解決策は とmax-width同じに設定されているようwidthです。アニメーション化する場合は、アニメーションが発生している間、一時的に拡大できるようwidthに設定する必要があることに注意してください(おそらく の値)。max-widthwidthauto

この問題の詳細については、以下のさまざまなCSS コメントをお読みください。

HTML:

<div id="container">
  <div id="block">
    sfdklhgfdlkbgjhdlkjdhbgflkjbhgflkdfgid
  </div>
</div>

CSS:

#container {
  flex: 0 0 auto;
  background: red;
  /* BUG: Certain display values seem to be where the bug happens, if display was just inline here, there would be no issue. */
  display: inline-flex;
  overflow: hidden;
  border: dotted 2px green;
}

#block {
  width: 0;
  /* height: 0; Setting height to 0 simply creates the illusion that width is fixed. If you look at the border, the width is still there, so height 0 does not help. */
  background: blue;
  /* BUG: Certain display values seem to be where the bug happens, if you don't need this, change it. */
  display: inline-flex;
  overflow: hidden;
  /* Has no practical effect here. */
  text-overflow: clip;
  /* font-size: 0; still keeps a little bit of width and can spoil the look of animating the width open from 0. */
  /* margin-right: -100vw; is a nasty hack that totally works but is bad for animating margins. */
  /* BEST FIX: Setting this property to the same as width may be the best way to fix the issue. */
  max-width: 0;
}

実行例: https://jsfiddle.net/resistdesign/k0b5s4p7

于 2019-01-19T15:10:36.423 に答える
0

あなたも設定すればheight: 0;、#blockあなたの問題は解決されます。なぜこれが起こっているのかわかりません:/

于 2013-10-21T10:22:11.007 に答える
0

そのdiv内にテキストを表示している場合。次に、font-size をゼロにしてみてください。

.class{
 font-size:0;
 }

または、テキストインデントを使用します

.class{ テキストインデント: -999px }

于 2013-10-18T14:37:04.113 に答える