Html 当使用CSS时，图像的宽度和高度似乎是错误的_Html_Css

Html 当使用CSS时，图像的宽度和高度似乎是错误的

html css

Html 当使用CSS时，图像的宽度和高度似乎是错误的,html,css,Html,Css,我不太擅长CSS设计，但我只是在为网站设计内容显示布局。我基本上想通过在容器div中放置一个图像来创建一条细线，并设置所有维度属性，如下所示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:

我不太擅长CSS设计，但我只是在为网站设计内容显示布局。我基本上想通过在容器div中放置一个图像来创建一条细线，并设置所有维度属性，如下所示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style>
       #thinLineWrap{
            width: 510px; 
            height: 3px;
            background-color: #000000;
       }  
       #thinLineWrap img{
           width: 170px;
           height: 3px;
           background-color: #000000;
           margin-top: 0px;
           float:left
       }
    </style>
</head>
<body>
     <div id="thinLineWrap">
        <img src="images/thin_line.gif" border="0">
    </div>
</body>
</html>


#薄纱{
宽度：510px；
高度：3倍；
背景色：#000000；
}  
#细线缠绕{
宽度：170px；
高度：3倍；
背景色：#000000；
边际上限：0px；
浮动：左
}

但是，在Chrome inspect中查看输出时，输出结果似乎无法达到预期的指定大小，如下面的快照所示

您可能还注意到，我的图像宽度和高度分别变为171px和4px，这与样式表部分中的设置不同。我可能犯了什么错误？为什么图像元素比它应该的大1个像素？任何建议都将不胜感激

编辑： 这里是原始有问题的细线图像的副本。不确定图像本身是否有问题

您在#thinlinewrap中定义了一个Img以具有这些属性

div#thinLineWrap{
   border:0px;
}

#thinlineWrap img{
   height:3px;
}

可能是您正在查找的代码。

我找到了。您的img从另一个样式继承了它的边框，请尝试像这样覆盖它：

#thinLineWrap img{
           border:none;
           width: 170px;
           height: 3px;
           background-color: #000000;
           margin-top: 0px;
           float:left
       }

有趣的复制+粘贴你的代码，我的Chrome没有这个问题。大小是正确的。我在JSFIDLE中使用正确的值检查您的代码。最后，我自己找到了问题的根本原因。令人尴尬的是，我的chrome处于100%以上的缩放模式，因此图像意外拉伸。但我刚刚了解到，我们不应该在开发工具中进行检查，因为我们处于缩放模式。谢谢Benham。我试过这个，它仍然给我同样的问题，非常奇怪。