Такой пример: Код (Text): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" /> <html> <head> </head> <body> <div style="width: 500px; height: 100px; overflow: auto; border: solid 1px red;"> This is a table in a div <br /><br /> <table style="width: 100%; height: 200px; background: green;"> <tr> <td></td> </tr> </table> </div> </body> </html> Как видно, содержимое дива по высоте превышает его размеры, соответственно появлятся вертикальный скролбар. В Opera 9.0, FireFox 1.5.0.7, Mozilla 1.7.3 шириной содержимого считается расстояние от левого края дива до левого края СКРОЛБАРА. Это мне нравится. А вот Internet Explorer 6.0.2800.1106 считает, что ширина содержимого - это расстояние от левого края дива до правого края ДИВА, вследствие чего под сколлбаром остается часть содержимого и соответственно появляется горизонтальная полоса прокрутки. Я, конечно, могу запретить горизонтальную прокрутку, но тогда я не увижу часть содержимого. Я могу задать ширину содержимого, но тогда при меньшем содержимом справа на месте скролбара будет пустая вертикальная полоса, что тоже нежелательно. Может кто сталкивался с подобной проблемой и знает, как заставить браузеры отображать содержимое одинаково?
Сталкивался - решения достаточно хорошего не нашел - для конкретного случая решил пробему сменой doctype - ибо в Quirk Mode корректно ширину вычисляет... Если найдете хорошее решение, сообщите, если не сложно...
А подскажите, пожалуйста, какой doctype помогает (отсутствие, кстати, помогает)? Я не знаю, что такое Quirk Mode. То есть я думала, что Transitional - это итак нестрогое соответствие стандартам.
Почитайте вот тут... проблема другая. но эффект аналогичный... http://forum.dklab.ru/js/other/SvoystvoPosition.html
woodfairy: Код (Text): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" /> <html> <head> <style type="text/css"> <!-- * html div#tab { width: 500px; height: 100px; overflow: auto; border: solid 1px red; } * html table { width: 96.9%; height: 200px; background: green; } div#tab { width: 550px !important; height: 100px; overflow: auto; border: solid 1px red; } table { width: 100%; height: 200px; background: green; } --> </style> </head> <body> <div id="tab"> This is a table in a div <br /><br /> <table> <tr> <td></td> </tr> </table> </div> </body> </html>
Не подскажу, т.к не знаю такого. Во всяком случае, лучше через CSS подогнать, чем использовать JS, т.к он может быть отключен.