wordpress页面中的谷歌地图样式问题答案

【问题标题】：Google Map styling issue in wordpress pagewordpress页面中的谷歌地图样式问题
【发布时间】：2013-05-20 20:23:16
【问题描述】：

我在将谷歌地图放入 wordpress 页面时遇到了一个奇怪的问题 - 缩放滑块似乎只有一半可见（请看图片）我认为这与 wordpress 的样式覆盖 google maps css 有关，有人知道如何解决这个问题吗？

提前致谢！

编辑：对于任何有同样问题的人，我在这里找到了解决方案： Google Maps zoom control

【问题讨论】：

【解决方案1】：

仅通过查看此图像很难弄清楚这里发生了什么。最好的办法是提供一些 CSS、jsfiddle 链接或指向有问题页面的链接。

我建议使用 Firebug 之类的工具，或 Chrome 的网络开发工具。然后，定位有问题的元素并检查添加了哪些类型的 CSS 属性，这会改变其显示方式。然后，您可以使用自己的 !important 覆盖它们，以便它们优先于现有的。

例如，假设您有这样的属性：

img {
    padding: 5px;
}

这将为页面中的所有图像添加 5 像素的填充。为了更改特定元素的设置，您可以尝试定位它并使用 !important 规则更改相关属性。假设元素的 ID 为“someelement”。然后，您可以像这样更改违规属性：

#someelement {
    padding: 0;
}

在上面的示例中，我们不需要 !important，因为在 ID 上设置的属性比在小部件类型上设置的属性具有更大的特异性。如果您想为页面中的所有图像覆盖此规则，您可以这样做：

img {
    padding: 5px !important;
}

这里需要 !important 标志，因为您的规则与原始规则具有相同的特异性。

有关 CSS 优先规则（包括特异性和 !important），请查看此处：

Chrome 开发者工具已与 Chrome 捆绑在一起。对于 Firefox，您可以在此处获取 Firebug：

【讨论】：