Цитата:
Цитата:
C другой стороны, как при таком раскладе рендерить inset box-shadow... |
Цитата:
|
Честно говоря не вижу причины не сделать так и не парить мозги:
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>:)</title> <style> #above, #below { width: 300px; height: 300px; } #above { position: relative; top: 10px; left: 15px; } #below { background-color: green; position: absolute; top: 20px; left: 20px; } #content{ position: absolute; top: 0; left: 0; height:100%; width:100%; background-color: red; } </style> </head> <body> <div id="above"> <div id="below"></div> <div id="content">Hello World</div> </div> </body> </html> |
ну вот ради теста решил добавить тень, вроде идентично получилось:
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>:)</title> <style> * { margin:0; padding:0; } #above, #below { width: 300px; height: 300px; } #above { background-color: red; position: relative; top: 10px; left: 15px; } #below { background-color: black; position: absolute; top: 0px; left: 0px; z-index: -1; box-shadow: 5px 5px 8px rgba( 0, 0, 0, 0.6 ); /*IE7*/ filter: Alpha(opacity=60) progid:DXImageTransform.Microsoft.Blur(pixelRadius=4); /*IE8*/ -ms-filter: Alpha(opacity=60) progid:DXImageTransform.Microsoft.Blur(pixelRadius=4); /* весь этот говнокод ради ИЕ7 */ govnokod: expression( this.elAppended?( this.elAppended.style.backgroundImage=this.parentNode.currentStyle.backgroundImage, this.elAppended.style.backgroundColor=this.parentNode.currentStyle.backgroundColor ):( this.elAppended=document.createElement('div'), this.nextSibling?this.parentNode.insertBefore(this.elAppended,this.nextSibling): this.parentNode.appendChild(this.elAppended), this.elAppended.style.position='absolute', this.elAppended.style.width='100%', this.elAppended.style.height='100%', this.elAppended.style.backgroundImage=this.parentNode.currentStyle.backgroundImage, this.elAppended.style.backgroundColor=this.parentNode.currentStyle.backgroundColor, this.elAppended.style.left=0, this.elAppended.style.top=0, this.elAppended.style.zIndex=-1 ) ); } </style> </head> <body> <div id="above"> Hello World <div id="below"></div> </div> </body> </html>Идеальное на мой взгляд решение. Спасибо melky, за решение, сам буду пользоваться им. |
Оффтоп...
Но мрак какой-то! Мы вдвоём, я - верстальщик, и второй js-программист-верстальщик, сумели через нашего очень вменяемого начальник протащить решение о том что наша (очень серъёзная) компания больше не поддерживает IE6-7, мы раньше пытались смотреть чтобы хотя бы структура не ломалась в старых ослах (и плевать на плюшки) - а теперь официально забили (даже тестировщики не проверяют)! Пусть хоть всё там "едет" - мы делаем рекламу для Майкрософта для IE9 - даже "родители" официально открещиваются от своего детища - но у нас есть всплывашка "Ваш браузер устарел"... Одна беда - надо IE8 поддерживать (ради тупоголовых пользователей XP) - это даже не 7-ой, но все равно... Хотя даже менеджеры мирятся с тем что border-radius реализуется "только картинками и поэтому ну его нафиг!" А ведь это "коммерция", и уж они-то как никто лоюбят считать пользователей... Раньше я тоже страдал перфекционизмом, и вылизывал даже для IE6 (хотя бы ради своего эго), но потом пошли крупные проекты косяком, времени стало не хватать - и я забил на IE6-7 (сторонние проекты вообще смотрю только в файербаге) - и никто пока не возмущался... Может и Вам стоит задуматься? Тем более, судя по всему, Вы не так хорошо в вёрстке разбираетесь - а поддержка IE6 требует такого же количества энциклопедических знаний вёрстки для IE6, как и весь CSS3 (всякие там "3px gap", "!important", "min-height" etc...)... Добрый совет - не захламляйте себе голову - год-два и кол-во пользователей IE6-7 станет 0,1% - а своего личного времени Вы впустую убъёте... Начните уж тогда и Amaya поддерживать - а чё? Самый правильный браузер! |
Цитата:
Люди если вы пытаетесь каждый раз говорить подобные фразы, то это лишь лишний раз доказывает обратное. Человек с опытом, никогда подобного не скажет. А что насчет поддержки ИЕ, это уж мы как нибудь сами решим отказаться от него или нет. И лишний раз говорить об этом нет смысла, может вам легче становится от того что вы в каждой теме об этом напоминаете, или просто пытаетесь получить кайф от того что выговорились. Об этом всем давно известно, какой смысл сотню раз пережевывать одно и тоже. И хвать делать из себя умных. Умнее вы для нас не станете все равно, ибо в инете все равны. И тут нет глупых и умных. |
Nanto,
Вот тут я с тобой на 200% согласен! В жопу отстой весь, всякие 6-7, у меня на работе так, ниже 8 заглушка с текстом типа обновите браузер если не хочешь можешь отключить и попадёшь на разваленный сайт. 8 главное чтоб макет не развалился и можно было хоть както пользоваться сатом, 9 должен быть нормальный на 95% всякие анимации cssные в нём не будут работать и градиенты не особо парюсь. остальные браузеры исключительно последние версии. |
Я вообще сейчас подумываю начать грид, флекс бокс и т.д. юзать попробовать, а для 9 и ниже скриптом эмулировать вроде есть уж готовые решения.
|
devote,
Холиварить будем? Таблицы любите? Расскажите-ка мне об особенностях поведения таблиц ("ведь это так кроссбраузерно") в разных браузерах при переполнении ячейки контентом... Где ячейка раздвинется (не смотря на заданную ширину), а где обрежет, а где перенсёт на следующую строку... Оптимально всё это прокуривать? Тогда джедайствуйте, только потом не просите пощады... ;) |
Seva1986,
Так есть. Только насчёт 9 не согласен - да с transition, animation проблемы, но с этим и так рановато спешить! Градиенты в 9 работают, только border-radius при этом не срабатывает, поэтому ему надо "скармливать" base64 - я вот пользуюсь кроссбраузерным генератором - ни разу не подводил: http://www.colorzilla.com/gradient-editor/ А со скриптами - больше возни получится!.. Ну это вообще стиль... Как кто кодит... Я пишу основную вёрстку под "тройку браузеров" (с плюшками CSS3), то что можно, прописываю отдельно для IE9, смотрю чтобы не разваливалось в 8-ом... И всё! P.S. Это слава богу что Microsoft в своё время продавил в консорциуме условные комментарии - кому так охота поддерживать старых ослов - можете писать для них отдельную вёрстку! Слабо? |
Часовой пояс GMT +3, время: 20:19. |