CSS 在 Safari 中不起作用 - 在 Chrome、Firefox 中正常答案

【问题标题】：CSS not working in Safari - OK in Chrome, FirefoxCSS 在 Safari 中不起作用 - 在 Chrome、Firefox 中正常
【发布时间】：2013-02-23 13:10:22
【问题描述】：

我的网站是http://proustscookies.blogspot.com/。我正在使用 CSS 对附加到搜索表单的按钮进行样式设置。

这是 CSS：

input.gsc-search-button {
margin-left: 10px;
height: 24px;
width: 60px;
border-style: none;
background-color: #666666;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
color: #FFFFFF;
}

margin-left 命令在 Firefox 和 Chrome 中运行良好，但在 Safari 中根本不行。

所有其他 CSS 规则（网站上方和整个网站，数据未显示）在所有三种浏览器中都有效（上次我也在 IE 中检查过）。

我使用 Chrome Extension Stylebot 找到了对象名称（input.gsc-search-button）。不幸的是，我在任何地方都找不到底层的 html（这是一个博主赞助的小部件。谷歌会在某处隐藏代码吗？我不知道。）

如果有人能帮我弄清楚为什么 Safari 中没有显示边距，或者如何找到搜索框的 html，我将不胜感激。

【问题讨论】：

对我来说，它在 chrome 和 firefox 上的工作方式应该如此，但在 safari 上它需要 1 个额外的像素。（在我的情况下为 -1px 边距，因此 -35px 变为 -36px）。希望这可以帮助某人

标签： html css safari

【解决方案1】：

我遇到了一个类似的问题，除了移动 safari 之外，所有样式都正确应用，非常奇怪。它甚至可以在桌面 safari 上运行！

最后，我用更精确的定位来修复它。我以前有这个：

.phone{
  background-color:gray;
}

此更改修复了它。

  div.phone {
    background-color:gray;
  }

顺便说一句，我通过在移动 safari 上使用检查器解决了这个问题。 http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787

【讨论】：

【解决方案2】：

它已被 google 覆盖。如果你这样做：

margin-left: 10px!important;

你可以覆盖它。

或者您可以通过执行类似的操作来使您的选择器更具体（并因此赋予它优先级）

td.gsc-search-button input.gsc-search-button {
   margin-left: 10px;
}

提示：您可以右键单击一个元素（在 firefox 或 chrome 中）并单击“检查元素”以查看与该元素关联的 css。

【讨论】：