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和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 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; }可以正常呈现。< / p>

{{1}}

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

list-style-image svg在webkit中更小

3 个答案: