вторник, 27 августа 2013 г.

joomla + IE


  • Если в IE не масштабирубтся картинки, то надо преминить в стиле картинки размер (например width: 36px; )
  • Источник. Суть заключается в следующем: 
    • У нас имеется «резиновая» страница, которая растягивается на всю ширину окна браузера.
    • Имеем таблицу с шириной 100%.
    • В таблице имеем ряд из 5-ти изображений (в нашем примере их реальная ширина — 250 пикселей), и необходимо, чтобы при изменении ширины окна браузера эти изображения растягивались или сужались пропорционально, заполняя всю ширину таблицы. Реализуется это следующим простым способом:
      HTML:
      1. <table>  
      2.   <tr>  
      3.       <td><img src="1.jpg" alt="" /></td>  
      4.       <td><img src="2.jpg" alt="" /></td>  
      5.       <td><img src="3.jpg" alt="" /></td>  
      6.       <td><img src="4.jpg" alt="" /></td>  
      7.       <td><img src="5.jpg" alt="" /></td>  
      8.   </tr>  
      9. </table>  
      CSS:
      1. table {  
      2.   width: 100%; /* растягиваем таблицу на всю ширину контента */  
      3.   border-collapse: collapse; /* схлопываем границы ячеек */  
      4. }  
      5. table td {  
      6.   padding: 0 10px; /* для красоты добавляем отступы в ячейках */  
      7. }  
      8. table img {  
      9.   width: 100%; /* растягиваем изображение на всю ширину ячейки */  
      10. }  
    Все замечательно, за исключением одного «но» — если смотреть этот пример в браузере IE6 или IE7, вы заметите, что при сужении окна браузера ширина изображений в определенный момент «застревает» и не они не сужаются дальше, в результате чего таблица вылазит за пределы контента.
    Это не что иное, как очередной баг всеми «любимого» браузера — изображения не сужаются дальше их фактического размера. В нашем случае это 250 пикселей.
    Ну а трюк, который позволяет исправить это недоразумение, заключается всего в одной строчке CSS-кода, который нужно применить к таблице, в которой расположены наши изображения:
    Взять код
    1. table {  
    2.   width: 100%;  
    3.   border-collapse: collapse;  
    4.   tabletable-layout: fixed; /* вот оно, лекарство от недуга IE6 и IE7 */  
    5. }  

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

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