псевдоэлементы: до проблемы абсолютной позиции в IE9 и Firefox, Chrome в порядке - PullRequest
Новая
       34

псевдоэлементы: до проблемы абсолютной позиции в IE9 и Firefox, Chrome в порядке

0 голосов
/ 09 января 2012

Я использую: прежде чем создавать собственные маркеры (см. Пример http://jsfiddle.net/cHqRd/1/), он отлично работает в Chrome и Firefox, но не в IE9 и Firefox

Проверьте этот пример в Chrome, а затем в IE9 и Firefox, чтобы увидеть разницу http://jsfiddle.net/cHqRd/1/

Пули падают в IE9

HTML 

<ul>
        <li> XSmall = UK 8</li>
         <li> Small = UK 10, Medium</li>
         <li> Medium = UK 12</li>
          <li> Large = UK 14</li>
          <li> small</li>
          <li> 179cm/ 5'11"</li>
 </ul>

CSS 

 li {font-size:1.6em;
    list-style:none; 
    position:relative; 
    padding-bottom: 0.6%;
padding-top: 0.8%;}

 li:before {
  position: absolute;
  top: 0.1em;
margin: 27% 0 0 -3.6%;
    /* accommodate Camino */
    vertical-align: middle;
    display: inline-block;
    content: "";
    display:block;
    width:0.4em;
    height:0.4em;
    background: #6d6d6d;
    border-radius: 0.4em;
    box-shadow: inset 1px 1px 1px rgba(0, 0 ,0, 0.4);
}

enter image description here

1 Ответ

2 голосов
/ 09 января 2012

Проблема в margin в определении li:before, замените 

top: 0.1em;
margin: 27% 0 0 -3.6%;

с 

top: 0.5em;
left: -1.0em;

Я не могу проверить с IE9, в Firefox9 это работает. Также смотрите ваш обновленный пример .

...