調べるのに無駄に苦労したので備忘として記載します。
表題の通り、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
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を動かせる環境がないので未確認です。