list-style-image svg在webkit中更小

Question

我在谷歌浏览器中使用svg list-style-image时遇到了一些奇怪的问题.

.services ul {
list-style-image: url('images/check.svg');
list-style-position: inside;
padding: 0;
margin: 0;
}

图像大小应为16px x 16px.但它看起来更小,大约一半.如果我切换到png,大小是正确的.在其他浏览器中它似乎没问题.

有任何想法吗？

Answer 1

因为你正在调用SVG图像; 您还必须在页面上定义SVG.如果没有提到,默认情况下也必须在SVG中定义height和使用widthSVG 1em.

<svg height="16px" width="16px" viewBox="0 0 16 16"  version='1.1' xmlns='http://www.w3.org/2000/svg'>
</svg>

通过使用background:url这种方式调用图像是更好的方法,height并且width可以给图像,因此SVG image可以正确呈现.

.services li:before { 
content:''; 
display:inline-block; 
height:1em; 
width:1em; 
background-image:url('images/check.svg'); 
background-size:contain; 
background-repeat:no-repeat; 
padding-left: 2em; 
}

Answer 2

我遇到了同样的问题,特别是在iOs设备上的大小.我通过使用:before属性解决了它

.services ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.usp ul li:before {
    content: url('images/check.svg');
    width: 16px;
    height: 16px;
    margin-right: 10px;
}

Answer 3

如果你想要列表符号，不要干扰列表项的浮动，请使用以下代码：（SASS）

ul
    list-style: none

li
    margin: 1.5rem 0
    position: relative

li:before
    content: " "
    background-size: cover
    background-image: url("img/check.png")
    width: 1.5rem
    height: 1.5rem
    position: absolute
    left: -2rem