Удалить прозрачное пространство 1px из тени CSS в IE11?

Я использую CSS box-shadow для имитации фона, который "истекает кровью" к краям окна браузера. Он отлично работает в Chrome, Firefox, Safari и Internet Explorer 9 и 10. Однако Internet Explorer 11 делает прозрачным 1px "пространство" перед левой (отрицательной) коробкой-тенью.

Возьмите этот HTML:

<div class="wrapper">
    <div class="widget">Test</div>
</div>

И этот CSS:

.wrapper {
    background:red;
    padding:20px 0;
}
.widget {
    width:600px;
    height:400px;
    margin:0 auto;
    text-align:center;
    background:white;
    box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
}

В большинстве браузеров widget DIV имеет белый фон и белые тени влево и вправо, которые заполняют ширину окна браузера без пробелов, разрывов или красных от кровотечения обертки. В IE11 есть 1px красная линия, которая выполняется вертикально вдоль левой части widget DIV.

Взгляните на эту скрипту для примера: http://jsfiddle.net/Bxsdd/. (Возможно, вам придется вручную настроить ширину панели результатов скрипта, поскольку небольшие различия в ширине окна показывают проблему более явно - опять же, только в IE11.)

Вещи, которые я попытался удалить прозрачным пространством:

Изменение box-shadow с помощью em's на использование px's
Добавление или вычитание 1px из других атрибутов box-shadow
Добавление границы вокруг widget DIV
Настройка padding, display, position и других элементов CSS для виджета
Так много вещей, которые я даже не могу вспомнить прямо сейчас

Любые идеи о том, как удалить прозрачное пространство 1px в IE11?

Ответ 1

Теперь, когда мы знаем, что это ошибка, вот одно приемлемое обходное решение:

.widget {
    width:600px;
    height:400px;
    margin:0 auto;
    text-align:center;
    background:white;
    box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
    position:relative;
    z-index:2;
}
.widget:before, .widget:after {
    position:absolute;
    content: " ";
    width:1em;
    left:-1em;
    top:0;
    height:100%;
    background:white;
    z-index:1;    
}
.widget:after {
    left:auto;
    right:-1em;
}

В основном, я добавляю абсолютно позиционированные псевдонимы :before и :after, которые содержат не что иное, как тот же цвет фона, что и widget DIV, и DIV box-shadow. Эти псевдоэлементы смещены только к внешнему левому и внешнему праву от widget DIV и расположены позади него, чтобы они обеспечивали правильный цвет для истечения box-shadow.

Очевидно, это добавляет усложнение, если вы уже используете элементы :before и :after, но это работает для моих целей. Я полагаю, можно было бы попробовать установить отрицательные поля на widget DIV.

Оформить сценарий здесь: http://jsfiddle.net/TVNZ2/

Ответ 2

ПРОБЛЕМА:

Это, по-видимому, проблема с градуированной альфа-прозрачностью/псевдонимом для вычисления четных/нечетных пикселей.

Насколько я могу судить, цвет попадает в эту линию пикселей, но расчет сглаживания исключает его альфа-значение, пытаясь разыграть различие теней с его окружением.

Это хорошо на внешней границе теней коробки, но не так велико на внутренней границе - вот почему мы все здесь!

ЧТО (ДОЛЖНО БОЛЬШЕ) РАБОТАЕТ ДЛЯ МЕНЯ (ЧИСТЫЙ CSS):

В моем случае это было исправлено добавлением нескольких дополнительных теней (разных и меньших значений):

div {box-shadow: 10px 0px 0px 0px red, 
                 4px 0px 0px 0px red, 
                 3px 0px 0px 0px red, 
                 1px 0px 0px 0px red;}

Хотя это не элегантно, это кумулятивно увеличивает "разлив" во внутреннюю линию пикселей. Для достижения желаемого значения потребовалось около трех дополнительных теней для теней, предполагающих, что разбрызгивание сглаживания устанавливается примерно на 25%. Различные плотности устройства могут изменить это?

Просто повторение одной и той же тени-окна не сработало - поэтому я предполагаю, что IE рассматривал их как ошибку повторения и игнорировал их.

ЧАСТЬ ЧАСТИ (ДЛЯ МЕНЯ):

В моем случае использования я добавлял чисто горизонтальную тень справа справа от текстового диапазона, чтобы создать впечатление заполнения, если линия сломалась и стала более одной строки. Я не добавлял тень в верхнюю или нижнюю часть или вокруг div.

"Большая часть" для меня - это то, что есть небольшая вертикальная точка "точка" размером около 1 пикселя или 2 пикселя в верхней и нижней частях линии пикселя с определенной шириной. По существу, та же проблема выше обратная.

Не идеальна, но гораздо предпочтительнее, чем прозрачная целая линия.

Я надеюсь, что это сработает для вас (читателя) в подобных сценариях, но я не тестировал это.

Удачи, и пусть все будут благодарить хорошего IE за его "проблемы"!!;)

Ответ 3

Я решил поделиться своим ответом на этот вопрос. Я не могу быть уверен, что у меня была такая же проблема, как и у всех остальных, но я заметил следующее: проблема возникает в EI11 (и EI10 в соответствии с другими, которые я не тестировал), когда элемент с установленной шириной пикселей центрируется с помощью margin: auto; (мой случай был проблемой слева/справа). Я заметил, что при изменении размера div будет смещаться вправо на 1px на каждой другой ширине пикселя экрана.

Я использовал прозрачный фон, чтобы заметить, что вместо простого пробела, появляющегося слева, div действительно сдвинул 1px вправо.

Изменение ширины div 1px действительно работает с текущей шириной экрана. Однако изменение ширины экрана приведет к возникновению проблемы на каждом другом пикселе.

Чтобы решить проблему, нам нужно определить ширину экрана как четную или нечетную. В моем случае, даже я добавил правило css для моего преступника div. Новое правило изменяет левое позиционирование на 0.5px.

Кроме того, функция должна выполняться на экране.

Ниже script я использовал для исправления проблемы:

(function (window, document) {
  function isEven() {
      var windowWidth = window.innerWidth;
  // Find out if size is even or odd 
  if (windowWidth % 2 === 0) {
    document.querySelector("#container").classList.add("container_left_1px");
  } else {
    document.querySelector("#container").classList.remove("container_left_1px");
  }
};
document.addEventListener("DOMContentLoaded", isEven);
window.addEventListener(('onorientationchange' in window) ? 'orientationchange':'resize', isEven);
})(this, this.document);

И правило css

.container_left_1px {left: .5px;}

Выполнение script только на EI10 и 11 было бы оптимальным. Пожалуйста, простите мои сценарии, поскольку это первый js, который я сделал. Пожалуйста, не стесняйтесь исправить любые проблемы. Это решило мою проблему; Я надеюсь, что кто-то сочтет это полезным!

Ответ 4

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

.class
{
border-top:1px solid $colorBg !important;
border-bottom:1px solid $colorBg !important;
}

Возможно, не так хорошо, как предыдущее решение, но это сработало для меня.

Ответ 5

Нашел это решение (Малое пространство между тенью коробок и div при настройке альфа), и это работает для меня: ширина div должна быть нечетным числом. ширина: 800 пикселей; = > не работает, но ширина: 799px; = > работает и белая щель исчезла!

Ответ 6

В моем случае у меня была белая линия между нижней долей и тенью, и я решил проблему с добавлением высоты в div с десятичными знаками:

height:30px; -> height:30.1px;

Ответ 7

Вы можете заполнить пространство контуром: сплошной цвет 1px; Это сработало для меня.

.container{
  display:block;
  position: relative;
  width:450px;
  height:450px;
  margin: 0 auto;
  background-color: #654d7f; 
}

.header-emphasis{
  position: absolute;  
  bottom:5px;
  max-width: 420px
}
span{
  position: relative;
  left:8px;
  background-color: white;
  padding:4px 4px 4px 0px;
  color: #666666;
  box-shadow: 6px 1px 0px 2px #ffffff, -8px 1px 0px 2px #ffffff;
  outline: 1px solid white;
}

<div class="container">
  <h3 class="header-emphasis">
    <span class="highlight">
      If there are no dogs in heaven then when i die i want to go         where they went.
    </span>
  </h3>
</div>