Как я мешаю фильтру градиента уместности Internet Explorer отключить содержание, которое должно переполниться?
Я использую градиент Internet Explorer, просачиваются мой CSS.
Это все подходило, пока я не заметил, что отображает, которые, как предполагается, расширяются вне их контейнеров overflow:visible; становятся отсеченными, как будто контейнер был установлен на overflow:hidden;
Я понятия не имею, почему это произошло бы, или как зафиксировать его. Кто-либо может помочь?
Я смотрю на него в IE8 и IE7
Это - CSS, вызывающая проблему, когда я комментирую ее, больше никакой ошибки:
.box{
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#b4cfe9', endColorstr='#e4eefc'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#b4cfe9', endColorstr='#e4eefc')"; /* IE8 */
}
2 ответа
Это работает, хотя это дополнительная разметка.
<div id="box_that_wants_a_gradient">
<div class="gradient_background_1"></div>
<div class="gradient_background_2"></div>
My content
</div>
У этой тактики есть бонус, так как вы можете добавить несколько полей градиента и установить их высоту / ширину в процентах от родительского, таким образом имитируя поведение «цветовой остановки», разрешенное в safari / moz.
Например:
<style>
#box_that_wants_a_gradient {
position:relative;
display:block;
height:100px;
width:100px}
.gradient_background_1 {
position:absolute;
height:20%;
*cbf writing out microsoft filter code*;
top:0;
width:100%;
left:0px}
.gradient_background_2 {
position:absolute;
height:80%;
*still cbf writing out microsoft filter code*;
top:20%;
width:100%;
left:0px}
</style>
Я знаю, что это не ответ на ваш вопрос, но подумайте о вашей аудитории. Все ли они только пользователи Internet Explorer, или они представляют естественные пропорции пользователей Интернета? Если они не все только пользователи IE (возможно, в корпоративной/образовательной сети), тогда подумайте об использовании только методов, соответствующих стандартам, и о том, чтобы приложение/сайт изящно деградировал до браузера, который его не поддерживает, например IE.
Теперь к вашему вопросу. Причина, по которой это не работает так, как вы ожидали, заключается в том, что поле не расширяется до конца содержимого, даже если видно переполнение. Содержимое просто "выходит" за пределы поля, но это не делает поле больше. Нет никакого способа заставить поле расшириться, чтобы вместить содержимое, кроме как не устанавливать фиксированные свойства ширины и/или высоты. На самом деле, в IE была ошибка, при которой вместо того, чтобы переполняться, коробка расширялась (это была ошибка).
Я могу порекомендовать один совет: используйте min-