Question

我的网站是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，我会非常感激。

Answer 1

它被谷歌覆盖了。如果你这样做：

margin-left: 10px!important;

您可以覆盖它。

或者您可以通过执行类似

之类的操作来使您的选择器更具体（并因此优先）

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

提示：您可以右键单击元素（在firefox或chrome中），然后单击“检查元素”以查看与该元素关联的CSS。

Answer 2

我有一个类似的问题，所有样式都正确应用，除了在移动野生动物园，非常奇怪。它甚至可以用于桌面游猎！

最后，我使用更准确的定位修复了它。我之前有这个：

.phone{
  background-color:gray;
}

此更改修复了它。

  div.phone {
    background-color:gray;
  }

顺便说一下，我在移动旅行社上使用检查员想出来了。 http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787

CSS无法在Safari中运行 - 在Chrome，Firefox中可以

2 个答案: