IE8 задал сегодня очередной квест
в главных ролях:
- свойство max-width для div
- корневая таблица, содержащая весь остальной контент
- div, который должен содержать thumbnails (превьюшки картинок), иметь ширину страницы и при большом числе превьюшек показывать скролл для прокрутки
- ну и IE8, злорадно демонстрирующий мне нижеследующее великолепие
исходная страница содержала много HTML кода, и пока я ее почикал до минимального содержания, прошло много времени. в итоге локализован следующий код:
слегка загуглив, нашел решение
div-контейнер с overflow: hidden был обернут таблицей с table-layout:fixed
в главных ролях:
- свойство max-width для div
- корневая таблица, содержащая весь остальной контент
- div, который должен содержать thumbnails (превьюшки картинок), иметь ширину страницы и при большом числе превьюшек показывать скролл для прокрутки
- ну и IE8, злорадно демонстрирующий мне нижеследующее великолепие
исходная страница содержала много HTML кода, и пока я ее почикал до минимального содержания, прошло много времени. в итоге локализован следующий код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">поскольку править можно было только страницу, которой я занимался, то кардинально трясти HTML структуру и CSS было нельзя
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.maxw {max-width: 700px;}
.holder {margin: 0 33px; padding: 5px 0px; overflow: scroll; white-space:nowrap;}
</style>
</head>
<body>
<table width="100%" border="1" > <!-- no branding -->
<tr>
<td valign="top">
<div class="maxw">
<div class="holder">
<a href="#" ><img src="/thumb.jpg"></a>
<a href="#" ><img src="/thumb.jpg"></a>
<a href="#" ><img src="/thumb.jpg"></a>
....</div>
</div>
</td>
</tr>
</table>
</body>
</html>
слегка загуглив, нашел решение
div-контейнер с overflow: hidden был обернут таблицей с table-layout:fixed
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">PROFIT
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.maxw {max-width: 700px;}
.holder {margin: 0 33px; padding: 5px 0px; overflow: scroll; white-space:nowrap;}
</style>
</head>
<body>
<table width="100%" border="1" > <!-- no branding -->
<tr>
<td valign="top"> <div class="maxw">
<table style="table-layout: fixed;width: 100%;"> <tr><td>
<div class="holder"><a href="#" ><img src="/thumb.jpg"></a>
<a href="#" ><img src="/thumb.jpg"></a>
<a href="#" ><img src="/thumb.jpg"></a>
....</div>
</td></tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
Комментариев нет:
Отправить комментарий