CSS 列表样式图像 svg 在 webkit 中更小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22179094/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
list-style-image svg smaller in webkit
提问by Jando
I've got a bit of an odd problem with my svg list-style-image in google chrome.
我在 google chrome 中的 svg list-style-image 有一些奇怪的问题。
.services ul {
list-style-image: url('images/check.svg');
list-style-position: inside;
padding: 0;
margin: 0;
}
The image size is supposed to be 16px x 16px. But it appears way smaller, about half of the size. If I switch to png, the size is correct. In other browsers it seems allright.
图像大小应该是 16px x 16px。但它看起来要小得多，大约只有一半大小。如果我切换到 png，大小是正确的。在其他浏览器中似乎没问题。
Any ideas?
有任何想法吗？
回答by Kheema Pandey
since you are calling the SVG image; you have to define SVG on your page as well. It is also mandatory to define the heightand widthas well in your SVG otherwise by default its take 1emwidth and height if not mentioned.
因为您正在调用 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>
It would be better way to call the image by using background:urlthis way a heightand widthcan given to image, so the SVG imagecould rendered properly.
使用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;
}
回答by MikeyMo
I had the same problem, especially with the size on iOs devices. I solved it by using a :before attribute
我遇到了同样的问题，尤其是 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;
}
回答by Valentin Seehausen
And if you want to have list symbols, that don't disturb the floating of the list items, take this code: (SASS)
如果你想要列表符号，不要干扰列表项的浮动，请使用以下代码：（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
