Граница-радиус на двух перекрывающихся элементах;фон просвечивает

Question

Я создал индикатор прогресса CSS, используя 2 перекрывающихся элемента.CSS для элементов выглядит следующим образом:

<code><code>#</code>status_progressbar {
  height: 22px;
  width: 366px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #000;
  cursor: pointer;
}
<code>#</code>status_progressbar_progress {
  height: 22px;
  background: #eee;
  float: right;
  -moz-border-radius: 0 10px 10px 0;
  -webkit-border-radius: 0 10px 10px 0;
  border-radius: 0 10px 10px 0;
  /* width controlled by Rails backend, using inline style */
}

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

[Снимок сделан в Firefox 4]

Может быть, кто-то может объяснить мне, почему это происходит и как это решить?

Answer 1

Это известная проблема. Один из способов обойти это, вложив закругленные элементы, когда вам нужна цветная рамка. Заполните другой блок той же величиной, что и ширина границы.

Более подробную информацию можно найти в этом сообщении в блоге @gonchuki: Соответствие стандартам - ложь (или, как все браузеры имеют нарушенный радиус границы)

Answer 2

Альтернативой МОЖЕТ быть простое использование элемента status_progressbar div (без дочерних элементов). Создайте достаточно широкое изображение (скажем, 1000 пикселей) и цвет по вашему выбору (лично я бы создал один белый с непрозрачностью 50%).

, то:

#status_progressbar {
  height: 22px;
  width: 366px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #000 url("/path/to/image') repeat-y 0 0;
  cursor: pointer;
}

Затем я бы манипулировал свойством положения фона с помощью javascript ВСЕГДА, предоставляя значение px, а НЕ%, так как% 50 центрировал бы изображение.

var prcnt = (YOURPERCENTAGE/100)* 366;

Answer 3

Мне удалось получить довольно хороший результат, слегка изменив CSS.( DEMO - протестировано в Chrome и FF)

#status_progressbar_progress {
    ...
    margin-right:-1px; 
    ...
}

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

Answer 4

Вы можете попробовать изменить радиус границы с правой стороны вверх на 1 пиксель для элемента фона.Это может заставить его исчезнуть за фронтом

Answer 5

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

Вы пробовали обернуть status_progressbar и status_progressbar_progress в другой элемент div и дать border-radius и overflow:hidden этомуДИВ