Google chrome 重置或覆盖用户代理样式表

我使用的是SVG，出于某种原因，用户代理样式表将高度设置为289 px

我不想定义高度，因为我将使用许多SVG（比如至少256个），也不想使用

为每个SVG手动设置不同的css规则！重要信息

那么，如何调整用户样式表（使用Chrome）或重置SVG的高度字段呢！，所以它没有定义

SVG HTML示例：（SVG高度为25像素，但SVG边界框渲染为289像素）

在尝试Alex W的答案时，我得到了以下结果：

---

您不能将规则添加到样式表中吗

<style type="text/css">
 ...
svg { height: auto !important; }
</style>

...
svg{height:auto！important；}

您希望将该规则放在样式标记的最底部，以确保它具有优先级

---

另外，在您的代码示例中，似乎您正在将

rect

设置为25像素，但不是实际的

元素。

好的，在玩了您的示例之后，我为您提供了一个答案。当使用

svg

时，它的

计算样式高度

是从其父元素设置的，因此，您必须将

svg

放在一个div中，该div具有

宽度

和

高度

，因此我给出了一个如何使用它的快速小示例，假设我们想把一个

svg

作为一个徽标，然后把它作为一个横幅或其他东西，我们可以通过这样做

svg

来实现这一点

CSS

.logo {
    width: 250px;
    height: 27px;
}
.navigation {
    width: 960px;
    height: 54px;
}

HTML

<div class="logo">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect width="250" height="25" stroke="black" stroke-width="2" fill="lightgray" />
  </svg> 
</div>
<div class="navigation">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect width="960" height="50" stroke="black" stroke-width="2" fill="lightgray" />
  </svg> 
</div>

您是否有该网站的链接？这是一个rails/backbone项目，Desive处于启用状态，因此要获得该页面，您必须自己动手。您是否希望为

svg

设置一次高度，就像它们都具有相同的高度，还是它们都具有不同的高度？将

height:auto！重要信息

如果将其应用于所有svg，则可以工作？多个svg，其中大多数具有不同的高度。svg边界框应正好是svg中所有元素的宽度和高度。这是我一直习惯的。。。。当我添加此项时，计算样式显示369px处的高度

，

，并带有一个可展开的箭头，单击该箭头时，显示

svg-auto！重要的main.css:252

。请看上面的图片，现在尝试电子邮件，它已发布，我可以给你发送链接。。。。这很吸引人，我只是想弄清楚父div的计算高度是如何计算的，因为它们不在css中…父div是从我编写的css样式中获得高度的，这将更改svg的计算高度以匹配其父div，因此如果svg的高度为25，则使其周围的div高27px，divs高度为27而不是25的原因是svg的轮廓为2。

<div class="logo">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect width="250" height="25" stroke="black" stroke-width="2" fill="lightgray" />
  </svg> 
</div>
<div class="navigation">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect width="960" height="50" stroke="black" stroke-width="2" fill="lightgray" />
  </svg> 
</div>