Фоновое изображение не отображается должным образом в IE7 - PullRequest
Новая
       1

Фоновое изображение не отображается должным образом в IE7

0 голосов
/ 28 ноября 2011

У меня есть ячейка таблицы, в которой я должен установить фоновое изображение, фоновое изображение, которое у меня есть, в основном состоит из 3 частей. то есть средняя часть является спрайтом, высота которого составляет 57 пикселей. Это изображение (3-е) можно повторить в направлении X, но мне нужно как-то растянуть его в направлении Y. В Firefox это изображение идеально подходит, используя свойство background-size:contain, но это свойство не работает для IE.

Итак, я устанавливаю высоту ячейки 57px (которая является высотой изображения) и повторяю изображение только в направлении x. HTML у меня выглядит примерно так: 

<table>
     <tr>
        <td>
               <ul>    //for some reason i'm using li tags for setting the images
                  <li class="img1"></li>
                  <li class="img3"></li> //the middle img which is creating the problem
                  <li class="img2"></li>
               </ul>
         </td>
    </tr>
</table>

Вот код, который я написал для класса "img3" 

.img3 {
        background-image: url("../images/PictorialViewBoxes/Blue_Middle.jpg");
        list-style: none;
        color: #FFFFFF;
        font-size: 16px;
        font-weight: Bolder;
        text-align: center;
        width: 160px;
        word-wrap: normal;
        text-transform: capitalize;
        cursor: pointer;
        padding-left:10px;
        padding-right:10px;
        min-height: 57px;
        max-height: 57px;
        font-family: arial;
        background-repeat:repeat-x;
        overflow-y:hidden;
        }

Высота ячейки, содержащей эти фоновые изображения, равна 'auto'. Теперь это работает нормально для всех браузеров, даже для IE8, но не для IE7. Вот результат для IE8 и IE7: -

Output in IE8 Output in IE7

Я не понимаю, почему этот белый пробел появляется в IE7 !!

Ссылка на JSFiddle: http://jsfiddle.net/qYNAD/8/

img1 img3 img2

Ответы [ 3 ]

1 голос
/ 28 ноября 2011

Вот ваше исправление: 

ul {
    overflow: hidden;
}

li {
    clear:both;
    float:left;
}
0 голосов
/ 27 мая 2015

Я исправил это, добавив прозрачную рамку к элементу dom с фоновым изображением:

Css до исправления: 

li.icontwo { 
    padding:7px 0px 25px 70px; 
    background:url(/images/icon2.png) left top no-repeat;
}

Css после исправления: 

li.icontwo {
    padding:7px 0px 25px 70px; 
    background:url(/images/icon2.png) left top no-repeat;
    border:1px solid transparent;
}

Я знаю, что это взлом, но это работает.

0 голосов
/ 28 ноября 2011

Увеличьте высоту, чтобы соответствовать изображению и убедитесь, что вы используете DOCTYPE, это часто вызывает другое поведение в IE. 

<!DOCTYPE html>
<html>...

Это может быть и я line-height, который вызывает ваши проблемы. Узнайте больше на http://reference.sitepoint.com/css/line-height

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...