прозрачность для ячейки таблицы div

Моя разметка внизу. Свойство background элемента #template установлено на rgba с некоторой прозрачностью. В IE9 прозрачность не работает. Если я удалю display: table-cell от #template, тогда прозрачность будет работать, но ячейка не будет на 100% выше. Это только в IE. Он работает в Chrome. Не пытался с FF.прозрачность для ячейки таблицы div

Я ищу помощь, выясняя, почему это происходит и как это исправить.

Я знаю, что если я удалю стили display: table-..., это сработает, но мне нужны эти стили для моего макета. За исключением display: table-cell для #template, который у меня не был изначально, но обнаружил, что без него IE9 не делает его на 100% выше. Мне нужно, чтобы он был на 100% выше.

http://jsfiddle.net/d6nUN/

<!DOCTYPE html> 
<html> 
    <head> 
    <style type="text/css"> 
     html, body { 
     height: 100%; 
     } 
     #container { 
     display: table; 
     height: 100%; 
     width: 100%; 
     } 
     #container #content { 
     background-color: #ff6622; 
     display: table-row; 
     height: 100%; 
     } 
     #template { 
     background: rgba(255, 255, 255, 0.3); 
     display: table-cell; 
     height: 100%; 
     width: 100%; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="container"> 
     <div id="content"> 
     <div id="template">text</div> 
     </div> 
    </div> 
    </body> 
</html>

источник

2013-04-11 akonsu

Попробуйте растянуть #template этот путь:

#template { 
    ... 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
}

http://jsfiddle.net/pfUe7/2/

источник

2013-04-11 14:24:00 dfsq

Да, он работает спасибо. Я не могу использовать абсолютное позиционирование, эти элементы являются частью более крупного макета, образец, который я опубликовал, изобретен. '# template' должен быть помещен внутри строки таблицы. – akonsu

Так в чем проблема? вы просто устанавливаете 'position: relative' для родительского контейнера. – dfsq

Я просто попробовал 'position: relative', что не будет этого делать ... –

Я сделал некоторые исследования и увидел следующее:

rgba background with IE filter alternative: IE9 renders both!

Попробуйте сделать следующее заявление в вашем наборе #template правил:

filter: progid:DXImageTransform.Microsoft.alpha(30);

Вы, возможно, придется сделать это правило CSS, специфичные для IE9, но по крайней мере, вы можете использовать table-cell.

Код: http://msdn.microsoft.com/en-us/library/ms532910%28v=vs.85%29.aspx

источник

2013-04-11 14:29:07

прозрачность для ячейки таблицы div

ответ

Смежные вопросы