Можно ли использовать границу RGBA в IE6/7/8?

Question

Мой CSS выглядит следующим образом:

#bbb { 
    border: solid rgba(0, 0, 0, .45) 200px; 
    height: 1500px; 
    width: 960px; 
} 

мне действительно нужно, чтобы сделать границы прозрачными, но не работает в IE6/7/8, как мне с этим бороться?

Answer 1

Вы можете сделать что-то подобное вместо этого, это в основном рендеринг «границы div» с прозрачным фоном вокруг «содержимого div». «Ширина границы» устанавливается путем изменения значения padding в div.border, а цвет/прозрачность исходит из значения background-image, которое в настоящее время ссылается на изображение размером 50% transparent black.

HTML

<div class="border"> 
    <div class="content"></div> 
</div> 

CSS

div.content { 
    background-color: #FFF; 
    width: 300px; 
    height: 200px; 
} 
div.border { 
    display: inline-block; 
    *display: inline; 
    padding: 200px; 
    background-image: url(https://dl.dropboxusercontent.com/u/6928212/halftransparentpixel.gif); 
    zoom: 1; 
} 

Вот fullscreen jsFiddle, который должен работать в IE6/7/8.

И вот ссылка на editable jsFiddle, который не будет правильно загружен в старых браузерах.

Answer 2

Альтернативой без использования изображений будет:

HTML

<div class="component"> 
    <div class="background"></div> 
    <div class="content">..Content..</div> 
</div> 

CSS

div.component { 
    position: relative; 
} 
div.background { 
    background:#f00; 
    position: absolute; 
    top: -1px; 
    left: -1px; 
    right: -1px; 
    bottom: -1px; 
    z-index: -1; 
    -webkit-opacity: 0.5; 
-moz-opacity: 0.5; 
filter:alpha(opacity=50); 
} 
div.content { 
    background:#fff; 
} 

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

http://jsfiddle.net/u7Srh/2/

Answer 3

Вы не можете использовать RGBA в IE8 и старше, и, насколько я знаю, нет polyfill для него тоже.

Как уже было сказано, вы могли бы использовать фон вместо этого, но вам не нужно использовать изображение. Вы также не можете использовать Opactiy (или filter: alpha(opacity)), так как это также делает детей прозрачными.

Вместо этого вы можете назначить родительскому элементу один градиент filter в формате ARGB.

.parent { 
    background: transparent; 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF)"; /* IE8 */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF); /* IE6 & 7 */ 
    zoom: 1; 
} 

Это эквивалент background: rgba(255, 255, 255, .5); в современных браузерах.

Для более подробного объяснения и преобразования rgba в argb см. this article.