ホームページ > 記事 > ウェブフロントエンド > IE の非常に奇妙なスクロール バーの問題を報告する - パーセント計算幅が浮動小数点数の場合、スクロール バーが異常に表示される_html/css_WEB-ITnose
IE の非常に奇妙なスクロール バーの問題を報告する - パーセント計算幅が浮動小数点数の場合、スクロール バーが異常に表示される_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:32:081183ブラウズ
原因:
プロジェクトに取り組んでいるときに、内容が DIV コンテナを超えて自動的に水平にスクロールするテーブルを作成しました。他のブラウザではすべて正常に動作しますが、IE ではテーブル table とコンテナ DIV の幅は明らかに同じですが、スクロール バーが表示されます。写真にあるように
その後、原因を探るために長い間実験を行った結果、IEブラウザが幅の値を整数値ではなくパーセントを使用していることが原因であることがわかりました。
例 1: パーセンテージの計算結果が整数の場合は正常に表示されます。
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>IE8奇葩滚动条问题实例</title> <style type="text/css"> * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .panel{ width:1000px; } .scroller{ overflow-x: auto; width:75%; background-color: #f00; } .inner{ width:750px; height: 10px; border: 1px solid #ddd; background-color: #ff0; } </style> </head> <body> <div class="panel"> <div class="scroller" style="height:35px;"> <div class="inner"></div> </div> </div> </body> </html> .scroller の幅 = .panel の幅*75%; 結果は 750 となり、.inner の幅と同じ整数になります。表示は正常です
例2: パーセントを使った計算結果が整数以外の場合、表示が異常になります。
.panel{ width:<strong>1001px</strong>; } .scroller{ overflow-x: auto; width:75%; background-color: #f00; } .inner{ width:<strong>751px</strong>; height: 10px; border: 1px solid #ddd; background-color: #ff0; } .panel を 1001px に設定し、.scroller の幅 = .panel の幅 * 75% を指定すると、結果は 750.75px になります。しかし実際には、ピクセルの最小単位は 1px なので、.scroller の幅は 751px になります。そして .inner も 751 です。論理的に言えば、水平スクロール バーは表示されないはずですが、IE では表示されます
IE で .scroller を 750px に設定することは可能でしょうか? この質問では、.inner を 750px に設定し、ページを拡大して表示します。 .scroller と .inner 余白のギャップが明らかなので、.scroller で表示される幅は 751px です。下の写真をご覧ください
そしてIE8ブラウザでテストしたところ、スクローラーの高さもスクロールバーが表示されるかどうかに影響することが分かりました。 .scroller の高さが 34- の場合、レンダリングは次のようになります
そして .scroller の高さが 35+ の場合、スクロールバーが表示されます。
IEブラウザの奇妙さには文句を言わざるを得ません。
スクロールバーの問題はIE9+でも発生しますが、改善点はスクローラーの高さとは無関係であることです。
そのため、IE ブラウザはスクロール バーが表示されるかどうかを判断するときに、実際に表示される値ではなく、計算された浮動値と比較すると推定されます。
次に、IE ブラウザの場合、.scroller の計算された幅が 750.75px になったと想像してください。.inner も浮動小数点数に設定するとどうなるでしょうか。
テストの結果、浮動小数点数が設定されている限り、スクロールバーは表示されません。
それでは、注意してください: 親コンテナの幅を計算して子ラベルの幅を等幅に設定する場合、親コンテナの浮動小数点値の幅を直接設定できます。現在、これはさまざまなブラウザと互換性があり、より便利な方法です。
余談: ブラウザ ウィンドウをズーム (Ctrl + マウス ホイール) すると、親コンテナの幅が浮動小数点数の場合、各ブラウザにスクロール バーが表示されます。これはスケーリングによる歪みの問題です。それは避けられないことであり、議論とは何の関係もありません。
この記事が良いと思ったら右下の【おすすめ】をクリックしてください！