Как предотвратить использование градиентного фильтра в Internet Explorer для обрезки содержимого, которое должно переполниться? - PullRequest
Новая
       23

Как предотвратить использование градиентного фильтра в Internet Explorer для обрезки содержимого, которое должно переполниться?

19 голосов
/ 03 мая 2010

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

Ответы [ 4 ]

11 голосов
/ 28 января 2012

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

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

Если вам нужна поддержка 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/).

10 голосов
/ 12 июня 2010

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

<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>
1 голос
/ 03 мая 2010

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

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

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

0 голосов
/ 19 апреля 2012

Я установил положение родительского div относительно, и это сработало :) (или абсолютное, тоже работает нормально)

...