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 に答える