webkit中的list-style-image svg較小

我在谷歌瀏覽器中的svg list-style-image中遇到了一些奇怪的問題。webkit中的list-style-image svg較小

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

圖像大小應該是16px x 16px。但它看起來比較小，大小約爲一半。如果我切換到PNG，大小是正確的。在其他瀏覽器中，它似乎是好的。

任何想法？由於您正在調用SVG圖像，因此您可能會收到以下錯誤信息：

來源

2014-03-04 Jando

;你也必須在頁面上定義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; 
}

來源

2014-03-04 18:00:09

我想從CSS調用SVG，而不必將svg代碼添加到我的html中。我對背景圖像做了同樣的處理，沒有任何問題。 – Jando

@Jando你必須在你的'class'中定義width和height屬性。通過添加'width'和'height'讓我知道你的作品。 –

啊，是的，你是對的。設置列表樣式圖像的寬度和高度是不可能的，所以我發現了這項工作： .services li：{ \t content：''; \t display：inline-block; \t身高：1em; \t width：1em; \t background-image：url（'images/check.svg'）; \t background-size：contains; \t background-repeat：no-repeat; \t padding-left：2em; } – Jando

我有同樣的問題，尤其是在iOs設備上的大小。我解決它使用：屬性

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

來源

2014-08-01 14:49:58 MikeyMo

之前，如果你想擁有列表的符號，不打擾列表項的浮動，藉此代碼：（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

來源

2016-01-20 20:45:31

webkit中的list-style-image svg較小

回答

相關問題