Search the Community

Добрый день. Размещено 2 блока по 3 изображения, отцентрировано flex, по плану при наведении курсора картинка затемняется, сверху появляется описание. Стили работают как задумано только в Chrome и Opera. В Сафари рамка не всплывает, текст не выравнивается. В IE 11 рамка всплывает, текст не выравнивается. Заранее благодарю. <div class="wrapper"> <div class="demo-content"> <div class="part"> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample54.jpg> <figcaption><section class="imgone">По Вашему желанию электропроводку можно уложить в ПВХ-короб</section></figcaption> </figure> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample73.jpg> <figcaption><section class="imgone">Красиво, эстетично и надежно - наше кредо!</section></figcaption> </figure> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample58.jpg> <figcaption><section class="imgone">Такой вариант электропроводки рекомендуем, например, в подсобных постройках</section></figcaption> </figure> </div> </div> </div> <div class="wrapper"> <div class="demo-content"> <div class="part"> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample54.jpg> <figcaption><section class="imgone">Вмонтированный в стену электросчетчик делает Вашу квартиру более объемной</section></figcaption> </figure> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample73.jpg> <figcaption><section class="imgone">Устанавливайте новые светильники, мы поможем подобрать их по мощности</section></figcaption> </figure> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample58.jpg> <figcaption><section class="imgone">Мы устанавливаем розетки и выключатели в любой компоновке</section></figcaption> </figure> </div> </div> </div> *, *:after, *:before { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; } .wrapper{margin:0 auto} .demo-content { text-align: center; } .part{max-height:310px;max-height:100%;display:flex;display:-moz-flex;display: -webkit-flex;justify-content:center} figure.img-box { text-align: center; position: relative; display: inline-block; overflow: hidden; margin: 3px 3px; max-width: 300px; width:100%; background-color:#DCDCDC; -webkit-box-shadow: 0 8px 17px 0 hex(#cccccc), 0 6px 20px 0 hex(#cfcfcf); box-shadow: 0 8px 17px 0 hex(#cccccc), 0 6px 20px 0 hex(#cfcfcf); } figure.img-box * { -webkit-box-sizing: padding-box; box-sizing: padding-box; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } figure.img-box img { max-width: 100%; vertical-align: top; } figure.img-box figcaption { position:absolute; top:0; bottom:0; left:0; right:0; align-items:center; z-index:1; display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; flex-direction:column; -webkit-flex-direction:column; -moz-flex-direction:column; -ms-flex-direction:column; justify-content:center; opacity:0; } figure.img-box:after { border: 8px solid #FF0000; position: absolute; content: ""; display: block; top: 50%; bottom: 50%; left: 0; right: 0; -webkit-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; opacity: 0; } figure.img-box:hover img { opacity:0.2; } figure.img-box:hover:after { top: 0; bottom: 0; opacity: 0.9; } .img-box .imgone { font-family:'Roboto',sans-serif; color:#00008B; font-size:16px; font-weight: 400; margin: 0; padding:0 10px; transform: scale(0); -webkit-transform:scale(0); -ms-transform:scale(0); -webkit-transition: all 1s ease 0s; transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; } .img-box:hover figcaption, .img-box:hover .imgone { transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); opacity: 1; } скриншоты прилагаю

У меня двух колоночное меню: .menu > li { display: inline-block; vertical-align: top; width: 50%; border-right: 1px solid #fff; /*белая линия в конце блока. вместе с серой линией тэга <a> образует бело-серую линию*/ }.menu a { text-decoration: none; display: block; text-align: center; font-size: 14px; border-right: 1px solid #dedede; /*вместе с белой линией тега <li> образует бело-серую линию*/ }.menu > li:nth-child(2n), .menu > li:nth-child(2n) a { border-right: none; /*убираем у правых пунктов меню линии разграничения - они там не нужны, там граница самого меню*/ }Поскольку бордюр тега <а> должен влезть в <li> у которого width: 50%, то тег <a> автоматически подвинется на ширину бордюра, а вот бордюр тега самого <li> никуда двигаться не станет, и сам подвинет следующий тег <li>, в результате ширина двух таких тегов будет больше 100% из-за бордюра. Проблема решается просто добавлением li {box-sizing: border-box;}, но тогда у нас левые колонки уже правых на величину двух бордюров, тегов <a> и <li>. Не велика беда, конечно, но можно же сделать более красиво: .menu > li:nth-child(2n+1) { width: -webkit-calc(50% - 1px); width: -moz-calc(50% - 1px); width: calc(50% - 1px); Тогда линия у нас будет точно по центру: одна полосочка тега <a> будет чуть левее, а полосочка тега <li> будет чуть правее. Но вопрос, ведь спецификация calc хуже поддерживается броузерами чем border-box, можно ли как-то сделать, чтоб если calc не сработает, то сработал border-box?

У меня есть один блок, во всех браузерах он отображается нормально, но в Mozilla нет. Проблема оказалась в box-sizing. Прочитав на этом сайте об этом тебе я обнаружил что начиная с Mozilla 1.0+ этот тег не воспринимается. Но что мне тогда делать? Ведь блок вылазит за свои рамки! Я пробовал -moz-box-sizing: border-box; он начинает видеть этот тег но вообще никак не реагирует на него. Как быть?