Проблема с изображением и прозрачным фильтром для IE - PullRequest
Новая
       2

Проблема с изображением и прозрачным фильтром для IE

0 голосов
/ 25 марта 2011

Я кодирую простые полосы, которые отображаются в нижней части браузера на моем веб-сайте. Я держал все под контролем, используя полупрозрачный PNG в качестве фона, но для большей гибкости меня попросили сделать это исключительно в CSS. Поэтому я использовал фон с RGBa с откатом до сплошного цвета и, используя условную таблицу стилей, фильтр Microsoft для IE 8 и более ранних версий. Это отлично работает, мой фон выглядит так, как я хочу. У меня проблема в том, что этот баннер содержит изображение, которое выше его. Поскольку я добавил фильтр, теперь он обрезается в IE ... Если перейти на сплошной фон, все работает нормально.

Это известная проблема? Есть ли обходной путь?

Вот мой IE css: 

/* This is the banner taking the whole browser width */
#bottompub {
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    height:50px;    
    text-align: center;
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B289BAE4,endColorstr=#B289BAE4)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B289BAE4,endColorstr=#B289BAE4);   /* IE6 & 7 */
    zoom: 1;
    margin:0;
    padding:0;
    overflow:visible; /* Just to make sure no parent change that to hidden */
}

/* This is the image in the banner */
#bottompub .pubimage { 
    position:relative;   
    margin-left:220px;
    height:75px;  
}


/* This is to fit my content web site width the image is in there */
#bottompub .insidebottompub {
    width:1031px;   
    margin-left:auto;
    margin-right: auto;     
}

Вот простой HTML: 

<div id="bottompub">
    <div class="insidebottompub">                              
        <a href="http://www.mysite.com"><img class="pubimage" src="myimageof75px.png"/></a>
    </div>
</div>

Спасибо!

Изменить, чтобы не использовать отрицательное поле

Ответы [ 3 ]

1 голос
/ 26 марта 2011

это известная проблема - нажмите на ссылку, помеченную недостатки , чтобы попробовать

Я немного попробовал и могу заставить ее работать на IE8, ноне 7, вот код с некоторыми примечаниями, чтобы показать, что я пробовал для IE7 (игнорируйте цвета, которые были там, чтобы помочь визуализировать)

CSS: 

/* This is the banner taking the whole browser width */
#bottompub {
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    height:50px;    
    background: transparent;
    background: #cfc;

    zoom: 1;
    /*-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B289BAE4,endColorstr=#B289BAE4)"; /* IE8 */    
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B289BAE4,endColorstr=#B289BAE4);   /* IE6 & 7 */    

}

/* This is the image in the banner */
#bottompub .pubimage { 
    height:75px;
    position: relative;
    top: -25px;
    /*z-index: 1;*/
}


/* This is to fit my content web site width the image is in there */
#bottompub .insidebottompub {
    width:1031px;   
    margin: 0 auto;
    text-align: center;
    background: #0f0;
    position: relative;
    /*z-index: 1;*/
}

.insidebottompub a {
position: relative; /* important*/
/* applying hasLyout here doesn't work for IE7 */
}

#bottompub {
/* no z-index or IE8 breaks */
/*z-index: -1;*/
}

, применяя position: relative; кссылка на изображение, казалось, была главной, но есть и другие изменения

0 голосов
/ 28 марта 2011

Это не решение проблемы с фильтром, а обходной путь, который работает в IE7 и Firefox без необходимости использования условной таблицы стилей и получения того же эффекта.Я использовал отдельный div для цвета фона и содержимого.По какой-то причине мне пришлось поместить фон после содержимого, в противном случае прозрачность все еще была унаследована, и изображение было обрезано.Я использовал z-index, чтобы показать элементы в правильном порядке.Я держал основной div нижнюю панель в основном для того, чтобы все было организовано и имел четкий идентификатор для всех элементов в этом разделе.

CSS: 

#bottompub {
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    height:50px;    
    margin:0;
    padding:0;   
}

#bottompub .background {
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    height:50px;
    background-color:#89BAE4; 
    opacity: .80;    
    filter: alpha(opacity="80");
    z-index: 50;
}


#bottompub .insidebottompub {
    position:relative;
    width:1031px;   
    margin-left:auto;
    margin-right: auto; 
    z-index: 100;    
}

#bottompub .pubimage {
    position:relative;
    float:left;
    left:220px;
    top:-25px;
}

HTML 

<div id="bottompub">
    <div class="insidebottompub">                              
        <a href="http://mysite.com"><img class="pubimage" src="myimage.png"/></a>
    </div>
    <div  class="background"/>    
</div>
0 голосов
/ 25 марта 2011

Прежде всего вы должны попробовать CSS3, а также префиксы других поставщиков для градиента и непрозрачности, чтобы убедиться, что они согласованы.

Во-вторых, старайтесь не устанавливать отрицательные поля для изображения и вместо этого устанавливать скрытое переполнение.для родительского див.То есть:

#bottompub { overflow:hidden; }

РЕДАКТИРОВАТЬ:Это работает на IE9: 

/* For Internet Explorer 5.5 - 7 */
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FF0000FF,endColorstr=#FFFFFFFF);
/* For Internet Explorer 8+ */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FF0000FF,endColorstr=#FFFFFFFF)";

Кроме того, посмотрите на это для всех префиксов вендоров, это краткое и хорошее чтение:http://css -tricks.com / CSS3-градиентов /

...