Question

我想在一个网站中使用很多标志图像而不加载太重的图像，我发现所有标志https://www.flag-sprites.com/的css精灵，它似乎非常有用，所以我尝试使用它，它部分工作但是它在chrome和firefox中显示丑陋的img：

我有一个文件夹，我的index.html和fil来自库flags.css和flags.png

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test sprite flag</title>
     <link rel="stylesheet" type="text/css" href="flags.css" />
</head> 
<body>
     <img class="flag flag-cz" alt=" Tchèque" /> 
     <img src="blank.gif" class="flag flag-cz" alt=" Tchèque" />     
     Tchèque     
     <br/>
      <img class="flag flag-zanzibar" alt=" zanzibar" /> 
     <img src="blank.gif" class="flag flag-zanzibar" alt=" zanzibar" /> 
     Zanzibar   
</body> 
</html>

我在IE中渲染得很好但是

它在谷歌浏览器中呈现如下：

enter image description here

在firefox中更糟糕的是：

enter image description here

Flag sprites css library：为什么渲染不好？

0 个答案: