締切済み

【CSS】ウインド幅を変えた際の表示

2008/12/18 15:02

以下のようなHTMLを用意しました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style>  </style> </head> <body> <div id="aaa">aaaaaaaaaaaaaaaaaaaa</div> <div id="bbb">bbbbbbbbbbbbbbbbbbbb</div> </body> </html> （１）ウインド幅が充分に広い場合、以下の様に表示されます。 │aaaaaaaaaaaaaaaaaaaa　　　　　　　bbbbbbbbbbbbbbbbbbbb│ （２）ウインド幅を狭くしていくと、以下の様に表示されます。 │aaaaaaaaaaaaaaaaaaaa　　　　　　　　　　　　　　　bbbbbbbbbbbbbbbbbbbb│ （３）さらにウインド幅を狭くしていくと、以下の様に表示されます。 │aaaaaaaaaaaaaa　　　　　　　bbbbbbbbbbbbbb│ <-スクロールバー-> このhtmlを改造して以下の様な動作を実現したいです。（N１）ウインド幅が充分に広い場合、以下の様に表示されます。 │aaaaaaaaaaaaaaaaaaaa　　　　　　　bbbbbbbbbbbbbbbbbbbb│ （N２）ウインド幅を狭くしていくと、以下の様に表示されます。 │aaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbb│　　　　　　　　　　　　　　　（N３）さらにウインド幅を狭くしていくと、以下の様に表示されます。 │bbbbbbbbbbbbbb｜ <-スクロールバー-> 以下の様に修正してみました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style>  </style> <script> window.onload = function(){ i = function(id){ return document.getElementById(id) }; i('aaa').style.width = i('aaa').innerHTML.length ; } </script> </head> <body> <div id="aaa">aaaaaaaaaaaaaaaaaaaa</div> <div id="bbb">bbbbbbbbbbbbbbbbbbbb</div> </body> </html> （N１）から（N２）までの動作はFF及びOperaでは実現できましたが、IEでは変わらずでした。（N１）、（N２）、（N３）のように動作するにはどうしたらよいでしょうか？