CSS 在 Chrome 和 Firefox 中不起作用答案

【问题标题】：CSS not working in Chrome and not in firefoxCSS 在 Chrome 和 Firefox 中不起作用
【发布时间】：2019-12-25 16:59:43
【问题描述】：

CSS 在 Chrome 和 Firefox 中不起作用

原始 CSS

background: url("../images/shortcut-button-bg.gif") no-repeat scroll left top #F7F7F7;
border: 1px solid green;
display: -moz-inline-stack;
margin: 0 0 20px;
width: 201px;

Firefox FireBug 显示为

 background: url("../images/shortcut-button-bg.gif") no-repeat scroll left top #F7F7F7;
    border: 1px solid green;
    display: -moz-inline-stack;
    margin: 0 0 20px;
    width: 201px;

在 Chrome Firebug 中

 background: url("../images/shortcut-button-bg.gif") no-repeat scroll left top #F7F7F7;
    border: 1px solid green;
    display: -moz-inline-stack;
    margin: 0 0 10px;
    width: 140px;

请回复我并告诉我使用 CSS 的浏览器兼容性

【问题讨论】：

Chrome 没有“Firebug”，只有自己的“开发者工具”。
@feeela 有一个用于 chrome 的“Firebug”....getfirebug.com/firebuglite
@Pabloker 哦——好的。现在我可以在任何浏览器中使用最慢的代码检查器；-)

标签： css google-chrome firefox

【解决方案1】：

当您使用供应商特定的前缀（如 display: -moz-inline-stack;）时，它会针对特定的浏览器。在这里，您可能已经通过 -moz 前缀猜到了，它只有 firefox 才能理解。这可能就是发生这种情况的原因。

试试这样的跨浏览器解决方案 one。

您可能需要添加的内容是：

    display: -moz-inline-stack; //for firefox
    display: inline-block; //for other browsers
    *display: inline;  //for IE6 & 7
    zoom: 1; //for IE6 & 7

【讨论】：

【解决方案2】：

不确定这是否是答案，但 Chrome 不知道 display: -moz-inline-stack;。也可以在display: -moz-inline-stack; 下方使用display: inline-block;。

【讨论】：

【解决方案3】：

我自己试过了，但是 Chrome 和 Firefox 都显示 width:201px; 140px 应该在您的样式中定义。

【讨论】：

【解决方案4】：

尝试从样式声明中删除 -moz- 位。随着 HTML5 的出现，大多数现代浏览器现在不应该需要它们。可能的 CSS 显示值是：-

    none    The element will not be displayed at all
    block   The element is displayed as a block element (like paragraphs and headers). A block element has some whitespace above and below it and does not tolerate any HTML elements next to it
    inline  This is default. The element is displayed as an inline element (like span). An inline element has no line break before or after it, and it tolerates HTML elements next to it
    inline-block    The element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element
    inline-table    The element is displayed as an inline table
    list-item   The element is displayed as a list-item, which means that it has a bullet in front of it
    table   The element is displayed as a table
    table-caption   The element is displayed as a table caption
    table-cell  The element is displayed as a table cell
    table-column    The element is displayed as a table column
    table-column-group  The element is displayed as a table column group (like <colgroup>)
    table-footer-group  The element is displayed as a table footer row group
    table-header-group  The element is displayed as a table header row group
    table-row   The element is displayed as a table row
    table-row-group     The element is displayed as a table row group
    inherit     The value of the display property will be inherited from the parent element

由于没有“inline-stack”值，您应该使用“inline”，或者完全删除“display”项。它应该是：-

    display: inline;

【讨论】：