Масштабирование теней вставки IE10 с радиусом границы

Я хочу добавить вставку-тень в IE10. Похоже, что закругленный угол увеличивается в размере относительно радиуса границы, примененного к входному элементу. Этого не происходит в webkit или firefox. Я понимаю, что имеет смысл масштабировать начальную тень блока, но странно масштабировать внутреннюю тень.

Как это должно выглядеть:

Как это должно выглядеть

Как это выглядит в IE10:

Как это выглядит в IE10

Кто-нибудь сталкивался с этим раньше и нашел решение?


forms css internet-explorer-10
person Don't Wake Me Up    schedule 28.03.2013    source источник
comment
Мое решение состояло в том, чтобы использовать границу в 5 пикселей с тенью в начале 1 пикселя вместо использования границы в 1 пиксель с тенью вставки в 5 пикселей.   -  person Don't Wake Me Up    schedule 30.04.2013

Ответы (2)


arrow_upward
3
arrow_downward

Вы можете сослаться на http://www.impressivewebs.com/ie10-css-hacks/

Некоторый тестовый код:

.navigation ul li a {
  -moz-box-shadow: 3px 3px 3px #ffccff;
  -webkit-box-shadow: 2px 2px 7px #ffccff;
  -o-box-shadow: 2px 2px 7px #ffccff;
  box-shadow: 2px 2px 7px #ffccff;
}
@media screen and (min-width:0\0) {
    /* IE9 and IE10 rule sets go here */
.navigation ul li a {
  box-shadow: 2px 2px 17px #3a312a;
 }
}
person Jaydeep    schedule 26.04.2013
comment
Я думаю, в этом случае я позволю этому выглядеть не совсем правильно. Но полезно знать, что есть способы обойти условные комментарии. - person Don't Wake Me Up; 30.04.2013

arrow_upward
0
arrow_downward

Я попытался добавить вставку box-shadow для каждой стороны блока отдельно, и это сработало! http://codepen.io/bivihoba/pen/DHuqk

person bivihoba    schedule 31.07.2013