1

我已经使用下面的 CSS 为我的网站制作了语音气泡，是的网站

在 google chrome 和 safari 中看起来不错。它没有出现在 Firefox 中给我，'-moz-transform' 被贬低了？我不擅长设计。我想寻求帮助如何解决这个问题。提前致谢。

/*SPEECH BUBBLES*/
    .wiget_bottom_all li h3 {
        position:relative;
        padding:15px;
        margin:1em 0 3em;
        color:#fff;
        background:#00B9B7;
        /* css3 */
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#f04349), to(#c81e2b));
        background:-moz-linear-gradient(#f04349, #c81e2b);
        background:-o-linear-gradient(#f04349, #c81e2b);
        background:linear-gradient(#00B9B7, #00B9B7);
        -webkit-border-radius:10px;
        -moz-border-radius:10px;
        border-radius:10px;
    }


    /* THE TRIANGLE
    ------------------------------------------------------------------------------------------------------------------------------- */

    /* creates the wider right-angled triangle */
    .wiget_bottom_all li h3:before {
        content:"";
        position:absolute;
        bottom:-20px; /* value = - border-top-width - border-bottom-width */
        left:105px; /* controls horizontal position */
        border:0;
        border-right-width:30px; /* vary this value to change the angle of the vertex */
        border-bottom-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :after */
        border-style:solid;
        border-color:transparent #00B9B7;
        /* reduce the damage in FF3.0 */
        display:block; 
        width:0;
    }
4

2 回答 2

2

Firefox 可能已经停止支持以供应商为前缀的 css 规则。您是否有未提供前缀的 css 规则：transform: ...这可能会奏效。

根据http://caniuse.com/#search=transform，自 firefox 19 以来，firefox 已支持未提供的前缀转换规则。

编辑：您没有在 st 的示例代码中使用 -moz-transform 您可能在 css 的其他地方使用它，否则错误消息真的不应该在那里

于 2013-05-18T11:10:34.810 回答
1

跨浏览器代码似乎有问题。您可以参考跨浏览器兼容代码的 css 技巧。也许，读这个。

于 2013-05-18T11:07:09.843 回答