пятница, 23 декабря 2011 г.

IE8 задал сегодня очередной квест
в главных ролях:
 - свойство 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 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>
поскольку править можно было только страницу, которой я занимался, то кардинально трясти HTML структуру и CSS было нельзя
слегка загуглив,  нашел решение
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">
<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>
PROFIT

Комментариев нет:

Отправить комментарий