3

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 的浏览器兼容性

4

4 回答 4

2

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

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

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

    display: -moz-inline-stack; //for firefox
    display: inline-block; //for other browsers
    *display: inline;  //for IE6 & 7
    zoom: 1; //for IE6 & 7
于 2012-10-24T13:29:47.553 回答
0

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

于 2012-10-24T13:32:47.990 回答
0

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

于 2012-10-24T13:35:19.643 回答
0

尝试从样式声明中删除 -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;
于 2012-10-24T13:37:15.650 回答