Позиционированный псевдо не работает с Doctype

Question

Из моего предыдущего вопроса: Добавление Doctype уничтожает макет Я понял, что оператор right:-10; в:

#nav li:after {
    width:10px;
    content:"";
    background: url('tabRight.png');
    position:absolute;
    height:100%;
    top:0;
    right:-10;  /*HERE*/
}

полностью испортил макет меню моей вкладки с добавленным типом документа. Если я удаляю это утверждение или устанавливаю right:0;, все исправляется, и тип документа остается на месте. Однако есть небольшая проблема: смещение правильного изображения вправо на 10 пикселей - это то, что заставило мою технику «закрывать двери» работать. Это потому, что правая раздвижная дверь имеет прозрачный фон , и когда двери «закрыты», правый сдвиг, по-видимому, не позволяет прозрачности быть скрытой левой дверью. Картинка ниже, надеюсь, лучше опишет вещи.

Синяя рамка - это правая дверь, красная - элемент li , зеленая - элемент ul . На втором рисунке показан сдвиг вправо, выполненный с помощью псевдо: after. Есть ли способ решить эту проблему, или кто-нибудь знает простую технику вокруг этого? HTML-код в моем предыдущем вопросе выше. Заранее спасибо!

Answer 1

Единицы измерения требуются в стандартном режиме.Используйте right: -10px;.

Answer 2

В CSS вы должны использовать единицу измерения. В вашем случае вы можете использовать различные измерения: right: 10px;

И примечание: Doctypes важны и не важны одновременно. Они помогают браузеру правильно настроить ваш HTML-код. Поэтому убедитесь, что вы знаете стандарты языка (X) HTML, на котором вы пишете, чтобы избежать странных причуд.