У меня проблема с неупорядоченными списками в браузерах WebKit.Этот код внедряется в страницу, которой я не владею, поэтому я не могу по-настоящему использовать сброс CSS, но не могу понять, что является причиной моей проблемы.
<div class='instruct'>
<ul>For best results please make sure:
<li>Your entire face including your eyebrows and chin are visible in the frame</li>
<li>Your face is well lit but please avoid excessive backlighting</li>
</ul>
</div>
CSS:
.instruct {
display: inline;
font-size:14px;
text-align:center;
padding-top: 10px;
padding:0px;
margin: 0px;
}
.instruct ul {
position: relative;
left: 30px;
width: 320px;
font-weight: bold;
padding: 0px;
margin: 0px;
list-style: none;
}
.instruct ul li {
font-weight: normal;
text-align: left;
text-indent: 0px;
padding: 0px;
padding-top: 10px;
margin: 0px;
}
Результат, который я сейчас получаю в IE / FF, заключается в том, что все элементы списка правильно выровнены в крайней левой части поля содержимого UL.Однако в Chrome и Safari пространство между левой стороной блока контента UL и каждым из блоков контента LI составляет около 20 пикселей.
При проверке элемента в консоли разработчика Chrome эффект выделения прямоугольника явно находится на расстоянии около 20 пикселей от левой стороны левой стороны UL.Это как будто 20 пикселей отступа или отступа откуда-то.
Учитывая, что отступы и поля для UL и LI равны нулю, я не могу понять это.
Любойидеи будут оценены.
РЕДАКТИРОВАТЬ: Вы можете увидеть его скриншот здесь:
