Как отключить фильтр градиента интернет-браузера от отсечения контента, который должен переполняться?

Я использую фильтр градиента интернет-браузера в своем 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 */
}

Ответ 1

Это работает, хотя это дополнительная разметка.

<div id="box_that_wants_a_gradient">
    <div class="gradient_background_1"></div>
    <div class="gradient_background_2"></div>

My content

</div>

Существует бонус к этой тактике, так как вы можете добавить несколько градиентных ящиков и установить их высоту/ширину как% от родителя, таким образом, эмулируя поведение "прекращения цвета" в сафари /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>

Ответ 2

Это может помочь тем, кто хочет отказаться от поддержки IE7.

IE7 всегда будет иметь проблему, если элемент расположен (относительный/абсолютный/фиксированный). В IE8 + проблема исчезает, если для параметра z-index установлено значение авто.

Если вам нужна поддержка IE7 или вам нужно будет стекать вещи с помощью z-index, вы должны согласиться на вторую упаковку DIV.

<div class="position_me_and_stack_me_with_z-index">
  <div class="give_me_a_filter">
    Content goes here
  <div>
</div>

Изменить 2012-05-29: Я создал пример, чтобы показать, как исправить эту проблему. Я создал пример, чтобы решить проблему стекирования z-index... и так случилось, что это тоже исправить эту проблему (http://jsfiddle.net/ryanwheale/gz8v3/).

Ответ 3

Я знаю, что это не отвечает на ваш вопрос, в частности, но подумайте о своей аудитории. Все ли они просто пользователи Internet Explorer или представляют собой естественные пропорции пользователей в Интернете? Если они не все пользователи IE (возможно, в корпоративной/образовательной сети), то рассмотрите только методы, совместимые со стандартами, и позвольте приложению/сайту грамотно деградировать в браузере, который его не поддерживает, например IE.

Теперь, для вашего вопроса. Причина, по которой он не работает так, как вы ожидали, заключается в том, что ящик не распространяется до конца содержимого, даже когда переполнение видимо. Содержимое просто "выходит" вне коробки, но это не делает коробку больше. Вы не можете получить окно для расширения, чтобы соответствовать содержимому, за исключением того, что не заданы значения ширины и/или высоты. На самом деле у IE была ошибка, в которой вместо переполнения ящик действительно расширялся (это было ошибкой).

Я могу порекомендовать один совет; использование min - < width/height > и max - < width/height > вместо ширины и/или высоты. Они позволяют вам гибко подбирать размер коробки, с ориентированными границами.

Ответ 4

Я установил родительскую позицию div в относительную и работал:) (или абсолютный, отлично работает)