CSS 在 Mozilla Firefox 中不起作用答案

【问题标题】：CSS is not working in Mozilla FirefoxCSS 在 Mozilla Firefox 中不起作用
【发布时间】：2014-05-19 05:14:56
【问题描述】：

在我的 PHP 页面中，我将 CSS 应用于 <div>。 CSS 在 Chrome 中运行良好，但是当我在 Firefox 中运行我的代码时，它没有被应用。

.due-money {
  background-color: #09C;
  color: white;
  width: 20px;
  border-radius: 8px;
  text-align: center;
  padding: 1px 2px;
  margin-left: 10px;
}

<div class="due-money">
  <?=$al_data7['data'][$j]['money']?>
</div>

火狐

铬

【问题讨论】：

看起来不错。定义“不（得到）应用”。另外，$al_data7['data'][$j]['money'] 中的字符串是什么类型的？考虑使用htmlspecialchars() 对任何意外/不需要的 HTML 进行编码
这是你的小提琴。它看起来工作得很好。 jsfiddle.net/RAtE3
它对我有好处
当我在 mozila 中运行它时，背景颜色和文本颜色没有改变。它的背景颜色应该是蓝色，颜色应该是白色。
它的好人！

标签： php html css firefox cross-browser

【解决方案1】：

您的问题很可能不是来自这段代码。尝试调试周围的元素。如果您使用 float 将元素放在同一行，则应确保在换行时还具有清除元素。

如果您将圆角边框元素单独选中，它也可以在 Firefox 上运行，至少在我正在使用的版本上（我在 Ubuntu 上使用 28.0 版）。了解您使用的是什么版本的 Firefox 以及在什么操作系统下，也可以帮助其他人帮助您。

如果你不使用清除元素，这就是我使用的。

HTML：

<div class="clear"> </div>

CSS：

.clear { clear: both; margin: 0; padding: 0; height: 0; line-height: 0; font-size: 0; }

如果这仍然不能解决您的问题，请继续调试周围元素样式，因为可能还有继承情况导致您出现此问题。

*也许您可以使用朋友报告部分的代码更新您的帖子。

【讨论】：

【解决方案2】：

不同的浏览器使用不同的 CSS 核心并以不同的方式解释（要独一无二，这只是与标准挂钩），因此您必须像这样考虑所有浏览器

.due-money
{
    background-color:#09C;
    color:white;
    width:20px;
    -moz-border-radius: 8px; /* Firefox */
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    border-radius: 8px;
    text-align:center;
    padding:1px 2px;
    margin-left:10px;
}

所有浏览器的更多信息可以found here

【讨论】：

... 仅当您指望更新的浏览器时，超过 50% 的浏览器没有。包括 25% 仍然在 XP 和 IE7 上...例如，我的 Android 2.3 依赖于 webkit。
@AmitKumar 我看不出你的截图有什么不同，但用户信息的宽度问题。你能拿其他的专门展示圆角问题以及你的完整 CSS 吗？
先生，截图有区别，右侧，chrome的背景颜色是蓝色的，但是在mozila，没有背景
@AmitKumar 这不是您的问题，先生，您的 CSS 似乎根本没有被触发。就像我说的，发布整个 CSS 页面，似乎有什么东西阻止了它的执行。