0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

IE9 CSS position: absolute;overflow: scroll; box-sizing: border-box; を組み合わせると幅がずれる

Posted at

調べるのに無駄に苦労したので備忘として記載します。

表題の通り、IE9で
position: absolute;
overflow: scroll;
box-sizing: border-box;
を組み合わせると幅が狭くなって表示されます。

参考:
http://terurou.hateblo.jp/entry/20120607/1339044000
https://groups.google.com/forum/?fromgroups#!topic/closure-library-discuss/3htcvlCLvHs)
http://www.days.jp/blog/2013/07/ie9-box-sizingborder-box-overflowscroll/
https://social.msdn.microsoft.com/Forums/ja-JP/6eea687b-8c61-4a35-a54c-e8812b4d8b11/ie9-boxsizing-borderbox-problem?forum=iewebdevelopment

下記のHTMLをIE9とそれ以外で開くと幅がずれてます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
</head>
<body>
<div style="
    background-color: green;
    width: 200px;
    height: 100px;
    position: relative;
    left: 30px;
    top: 30px;
">
  <div style="
    background: yellow;
    overflow: auto;
    max-height: 50px;
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    box-sizing: border-box;
  ">A<br>
    B<br>
    C<br>
    D<br>
    F<br>
  </div>
</div>
</body></html>

Chrome
Chrome
IE9
IE9
IE9では黄色の部分の幅が狭く緑の部分が左に出てます。

https://social.msdn.microsoft.com/Forums/ja-JP/6eea687b-8c61-4a35-a54c-e8812b4d8b11/ie9-boxsizing-borderbox-problem?forum=iewebdevelopment
のhtmlのほうがわかりやすいかもしれません)

参考ページでは条件が2つだったりしますけど僕が間違えてるんでしょうか?
ちょっとよくわからないですね。

回避策は
box-sizing:content-box;
にせよと書いてあったりしますが、
問題起きないかどうかは場合によるのではないかと心配しています。

http://www.days.jp/blog/2013/07/ie9-box-sizingborder-box-overflowscroll/
ではIE10でダメだった様な記載がありますが、
僕の手元には気軽にIE10を動かせる環境がないので未確認です。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?