процент ширины с процентным заполнением

Question

У меня есть макет здесь: http://jsfiddle.net/chricholson/susXf/11/

В Chrome и Firefox вы заметите, есть зазор 1 пикселя между краем красной рамки и изображения. В IE 8 этого нет (как и ожидалось).

Этого не происходит, если я укажу ширину и прописку с помощью пикселей.

Мое предположение, хотя я не могу быть уверен, связано с расчетами процентов и количеством округленных чисел. 6% для прокладки составляет 20.94px, ширина p составляет 328,06. Предполагая, что оба округлены (несмотря на то, что первый должен быть округлен), тогда общая ширина составляет 348 пикселей, что, по-видимому, является причиной проблемы. IE, возможно, более интеллектуальный и правильно округляется?

Тем не менее, есть ли у кого-нибудь еще такая же ситуация и нашли исправление?

Answer 1

Ошибка на самом деле вызвана из-за вашего родительского элемента. У вас установлена ​​ширина 349px. Некоторые браузеры, в зависимости от доступного пространства экрана, по умолчанию округляют вверх или вниз.

Как правило, рекомендуется использовать красивые ширины при использовании процентов.

---

Решение: http://jsfiddle.net/vonkly/susXf/29/

Это решение позволяет для произвольной не установлено, ширина изображения, чтобы определить ширину оберточной элемента и, таким образом, ребенок span и <p> ширины. Это позволяет цели OP «на лету», без необходимости вручную вводить пользовательские классы или объявления ширины.

---

CSS

img { 
    width: 100%; 
    max-width: 100%; 
} 
.videoThumb { 
    position: relative; 
    display: inline-block; 
    padding: 0; 
} 

.videoThumb .details { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    color: #000; 
    background-color: red; 
} 
.details p { 
    display: block; 
    padding: 14px 4%; 
    margin: 0; 
} 

HTML

<div class="videoThumb"> 
    <img src="http://www.chainreactiondisco.com/images/disco_panel_02_01.jpg"> 
    <span class="details"> 
     <p><!-- containing element for black box --> 
      Watch<br /> 
      Signature Manager vs. Mail Dislcaimers 
     </p> 
    <span><!-- /details --> 
</div><!-- /videoThumb --> 

ПРИМЕЧАНИЕ

Если вы планируете использовать теги <p> внутри span.details, я бы предложил немного изменить ваш css. Все, что вам нужно сделать, это изменить .details p {} на .details span {}. Затем перейдите в свой HTML и измените теги <p> на теги <span>.