Совместимость CSS на IE.Коробка теней - PullRequest
Новая
       27

Совместимость CSS на IE.Коробка теней

0 голосов
/ 28 июля 2010

Я создаю веб-сайт, и мне нужно стилизовать некоторые поля, как это изображение здесь . Хотя их высота не фиксирована для его динамического контента, я использовал -webkit-border-image и -moz-image-border, и он работал отлично. К сожалению, IE - плохой плохой парень, и я хотел, чтобы он выглядел правильно.

Я думал об использовании CSS3 с box-shadow и -webkit-gradient и -moz-linear-gradient, но опять же IE не работает.

Я бы хотел знать некоторые техники CSS, чтобы у меня была рамка градиента и тени внутри div с неопределенным размером (я имею в виду динамическую высоту и ширину)

Ответы [ 2 ]

2 голосов
/ 28 июля 2010
0 голосов
/ 28 июля 2010

Если фиксированная ширина и фон однородный, это будет работать даже на IE6:

  1. Сделайте снимок, вырежьте средний градиент / белый, сделайте его прозрачным (тени должныостаются непрозрачными), от серого до белого.Разрежьте его на 2 части - верхняя часть, которая может быть растянута на любую высоту без изменения внешнего вида, а нижняя часть с закругленными углами (bg-mid.png и bg-bottom.png)
  2. Верхний градиентчасть также обрезается как высокое изображение шириной в 1 пиксель.
  3. Введите этот HTML-код: 
<div class="gradient-bg">
    <div class="top-content">
        your content
    </div>
    <div class="bottom-shadow">
    </div>
</div>

Затем стилизуйте их соответствующим образом.Поместите изображение градиента в качестве верхнего фона Div, bg-mid.png в качестве фона верхнего содержимого (с repeat-x), а нижнюю тень - это bg-bottom.png.

Для IE6 выВам нужно будет использовать условные операторы CSS и отфильтровать атрибут CSS для загрузки изображений с альфа-каналом.

...