为什么某些CSS在Firefox中无法正常工作？

Question

3

我一直在努力使我的网站不仅兼容chrome，还兼容firefox，但结果并不如我所希望的那样顺利。即使是Firefox 9（我今天下载的），他们自己宣传自己是与更多css兼容的“最佳”浏览器，但是出现了无法解释的错误，可能是我做错了一些没有工作的css。

我的第一个问题是关于渐变。我有两个使用相同渐变代码的灰色渐变分隔符，但产生非常不同的结果。

background-image: -moz-linear-gradient(bottom, rgb(58,58,58) 0%, rgb(85,85,85) 100%); 是真正起作用的那个。
background-image: -moz-linear-gradient(bottom, rgb(42,42,42) 100%, rgb(25,25,25) 0%); 然而，没有。实际上根本没有显示任何东西。我把第一个放在这里测试是否有效，它确实有效，但是这个特别的就不行。

使用Firebug，它将我的代码行更改为：background-image: -moz-linear-gradient(center bottom , #2A2A2A 100%, #191919 0%); 那么我哪里犯了错误吗？因为我看不出示例1和2之间的区别。

我的第二个错误不是CSS3，而是在表格中添加padding:20px;。它在chrome中非常有效，但在firefox中没有显示任何填充。除了边框属性之外，是否有其他替代方法，因为我也在标签中使用边框。

再次感谢您的帮助！我非常感激，因为这个错误已经困扰我一两个小时了，我还没有找到任何解决方法。

- Ninjiangstar

1

你能否在你的页面上发布一个链接或者在http://jsfiddle.net上创建一个测试案例，以便我们尝试复现它？ - BoltClock

1

如果您还没有看过，这是Firefox线性渐变的文档：https://developer.mozilla.org/en/CSS/linear-gradient。 - jfriend00

实际上，我解决了我的渐变问题。我注意到在我的第一个示例中，它从0％开始，然后以100％结束，所以我在我的第二个示例中尝试了这个方法，它起作用了。所以我猜Firefox对代码方向非常严格，而Chrome则不是。但是我仍然可能需要在<tr>问题上寻求帮助。 - Ninjiangstar

@Ninjiangstar，您所说的“<tr>问题”，是指您尝试为<tr>元素分配填充吗？ - Mr Lister

是的。目前它可以在Chrome上运行，但无法在Firefox上运行。 - Ninjiangstar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Constantin Groß · Accepted Answer

正如你自己发现的那样，你不能从100%到0%创建渐变，因此渐变步骤必须按百分比递增排序。（尽管某些浏览器似乎可以显示它，但你应该始终遵循标准！）

关于标签，它不接受填充属性，请参见https://developer.mozilla.org/en/HTML/Element/tr 尝试在上使用cellpadding和cellspacing HTML属性或在

上使用CSS填充来实现你想要的效果。