Question

我有一些外部CSS样式，其中一个添加了这个规则：

svg {
    width: 100% !important
}

这似乎覆盖了我的width属性（在chrome DevTools中检查时）。问题在于它覆盖了由javascript插件（Leaflet）生成的div元素的宽度，该插件扩展了给定的div以使其成为一个元素（svg元素中包含3行）。

<svg class="leaflet-zoom-animated" width="1442" height="728" viewBox="-722 -364 1442 728" style="transform: translate3d(-722px, -364px, 0px);">
    <g>
        <path stroke-linejoin="round" stroke-linecap="round" pointer-events="none" stroke="green" stroke-opacity="1" stroke-width="5" fill="none" d="M-584 -109L-252 64"></path>
    </g>
    <g>
        <path stroke-linejoin="round" stroke-linecap="round" pointer-events="none" stroke="green" stroke-opacity="1" stroke-width="5" fill="none" d="M-222 167L-252 64"></path>
    </g>
    <g>
        <path stroke-linejoin="round" stroke-linecap="round" pointer-events="none" stroke="green" stroke-opacity="1" stroke-width="5" fill="none" d="M34 -338L-252 64"></path>
    </g>
</svg>

显示Leaflet映射需要宽度，目前它似乎折叠为0px xpx（父节点也没有大小，但这很好）。

有什么方法可以确保元素仍然获得Leaflet插件设置的宽度，并且它没有被覆盖？

Answer 1

我认为我的问题是正确的。我们在div容器中添加了svg，并为svg提供了一个带有！important.With的属性，它将覆盖应用globallay的一个属性并侦听svg特有的属性。在div里面。

http://jsfiddle.net/hw60vs5a/

svg{
    background-color:lightgrey !important;
    width:100% !important;
}

div svg{
    background-color:lightblue !important;
    width:auto !important;
}

注意：我不太清楚svg是如何工作的

Answer 2

有趣的是，我们可以通过使用更具体的选择器将宽度设置为auto来使Chrome，Opera和Firefox尊重width属性。不是Internet Explorer。

正如评论中正确指出的那样，!important具有最高的特异性，它只能被更具体的!important覆盖。在这种情况下，您可以将宽度设置为auto到那些在其类名中具有leaflet部分的svg元素，例如：

svg[class|=leaflet] {
    width: auto !important;
}

如果在该外部css文件之前或之后添加此规则，这并不重要。两者都有效。

您可以在Chris's post或其他地方找到有关属性选择器的更多信息。

虽然没有IE支持！我不确定在这种情况下谁做得对，但事实依旧。这里可以看到一个实例：http://jsfiddle.net/skip405/na4sdxnk/

覆盖！重要的宽度属性？

2 个答案: