设置list-style-position,li元素嵌套块元素时,Firefox浏览器布局失效处理

将ul列表样式符号放到列表内,很自然地想到设置list-style-position:inside。但当li元素嵌套有块元素时,Firefox下悲剧了。

查看:http://codepen.io/xiaoyewen/pen/KpzMLO

Firefox下的效果成了这样的,Chrome与IE好好的

 

看来不能这样顺利地实现效果呀,无奈就换了思路,乖乖生成小黑点吧。

.list div::before {

  content: '.';

  font-size: 20px;

  position: relative;

  top: -2px;

}

 

附加:marker box是一个独立的盒模型,设置list-style-position为outside时,它在原先块模型的外部

  设置为inside时,它在块模型的第一行行框内

详查:http://www.w3cplus.com/css3/css3-lists-marker.html

你可能感兴趣的:(position)