css - webkit 中的列表样式图像 svg 更小

Question

我在 google chrome 中的 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 和 width ，否则默认情况下它采用 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 图像 可以正确呈现。

.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; 
}