要更改 CSS 以与所有浏览器兼容 [关闭]答案

【问题标题】：CSS to be changed to be compatible with all the browsers [closed]要更改 CSS 以与所有浏览器兼容 [关闭]
【发布时间】：2012-06-12 12:12:30
【问题描述】：

html, body {
        margin: 0px;
        padding: 0px;
        font: normal 14px/16px Helvetica, Sans-serif;
    }
    body {
        background: #cbd2d8;
        background-image: 
            -webkit-gradient(linear, left top, right top, 
                from(#c5ccd4), 
                color-stop(0.75, #c5ccd4), 
                color-stop(0.75, transparent), 
                to(transparent)); 
        -webkit-background-size: 5px 100%;
        background-size: 5px 100%;
        -webkit-user-select: none;
    }
    header.navigation-bar {
        position: relative;
        width: 10display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-pack:justify;
        -webkit-box-sizing: border-box;0%;

        height: 45px;
        padding: 6px 10px;
        background-image: 
            -webkit-gradient(linear, left top, left bottom, 
                from(#b2bbca), 
                color-stop(0.25, #a7b0c3),
                color-stop(0.5, #909cb3), 
                color-stop(0.5, #8593ac), 
                color-stop(0.75, #7c8ba5),
                to(#73839f)); 
        border-top: 1px solid #cdd5df;
        border-bottom: 1px solid #2d3642; 
    }
    header.navigation-bar.black {
        position: relative;
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-pack:justify;
        -webkit-box-sizing: border-box;
        height: 45px;
        padding: 6px 10px;
        background-image: 
            -webkit-gradient(linear, left top, left bottom, 
                from(#636363), 
                color-stop(0.25, #424242),
                color-stop(0.5, #202020), 
                color-stop(0.5, #000000)); 
        border-top: 1px solid #858585;
        border-bottom: 1px solid #858585; 
    }
    h1 {
        -webkit-box-flex: 1;
        text-align: center;
        margin: 0px;
        font: bold 20px/32px Helvetica, Sans-serif;
        letter-spacing: -1px;
        text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
        color: #fff;
    }

    h2 {
        font-size: 16px;
        line-height: 22px;
        text-shadow: 0 -1px 1px #fff;
        color: #666;
        text-align: center;
    }

    /* Bordered Button Styles */
    .button.bordered {
        -webkit-box-shadow: 0 1px 1px #9aa5bb, 0 -1px 1px #8e96a5; 
        border: solid 1px #54617d;
        border-color: #484e59 #54617d #4c5c7a #54617d; 
        display: inline-block;
        cursor: pointer;
        padding: 0px 10px;
        font-size: 12px;
        line-height: 28px;
        height: 30px;
        margin-top: 1px;
        -webkit-box-sizing: border-box;
        -webkit-border-radius: 5px;
        background-image: 
            -webkit-gradient(linear, left top, left bottom, 
                from(#92a1bf), 
                color-stop(0.25, #798aad),
                color-stop(0.5, #6276a0), 
                color-stop(0.5, #556a97), 
                color-stop(0.75, #566c98),
                to(#546993)); 
        color: #fff;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
    }
    .button.bordered:hover, .button.bordered.touched {
        background-image: 
            -webkit-gradient(linear, left top, left bottom, 
                from(#7d88a5), 
                color-stop(0.25, #58698c),
                color-stop(0.5, #3a4e78), 
                color-stop(0.5, #253c6a), 
                color-stop(0.75, #273f6d),
                to(#273f6d));
        -webkit-tap-highlight-color: transparent;
    }
    /* End Bordered Button Styles */

    /* Back Bordered Button Styles */
    .button.bordered.back {
        padding: 0px 7px 0px 3px;
        margin-left: 10px;
        position: relative;
    }
    .button.bordered.back > span {
        position: relative;
        z-index: 1;
    }
    .button.bordered.back > span.pointer {
        z-index: 0;
        background-image: 
            -webkit-gradient(linear, left top, right bottom, 
                from(#92a1bf), 
                color-stop(0.3, #798aad),
                color-stop(0.51, #6276a0), 
                color-stop(0.51, #556a97), 
                color-stop(0.75, #566c98),
                to(#546993)); 
        border-left: solid 1px #484e59;
        border-bottom: solid 1px #9aa5bb;
        -webkit-border-top-left-radius: 5px;
        -webkit-border-bottom-right-radius: 5px;
        -webkit-border-bottom-left-radius: 4px;
        height: 23.5px;
        width: 23.5px;
        display: inline-block;
        -webkit-transform: rotate(45deg);
        -webkit-mask-image: 
            -webkit-gradient(linear, left bottom, right top, 
                from(#000000), 
                color-stop(0.5,#000000), 
                color-stop(0.5, transparent), 
                to(transparent));
        position: absolute;
        left: -9px;
        top: 2.5px;
        -webkit-background-clip: content;
    }
    .button.bordered.back:hover > span.pointer, .button.bordered.back.touched > span.pointer {
        background-image: 
            -webkit-gradient(linear, left top, right bottom, 
                from(#7d88a5), 
                color-stop(0.3, #58698c),
                color-stop(0.51, #3a4e78), 
                color-stop(0.51, #253c6a), 
                color-stop(0.75, #273f6d),
                to(#273f6d)); 
    }

    /* End Back Bordered Button Styles */

    /* Next Bordered Button Styles */
    .button.bordered.next {
        padding: 0px 3px 0px 7px;
        margin-right: 10px;
        position: relative;
    }
    .button.bordered.next > span {
        position: relative;
        z-index: 1;
    }
    .button.bordered.next > span.pointer {
        z-index: 0;
        background-image: 
            -webkit-gradient(linear, left top, right bottom, 
                from(#92a1bf), 
                color-stop(0.3, #798aad),
                color-stop(0.51, #6276a0), 
                color-stop(0.51, #556a97), 
                color-stop(0.75, #566c98),
                to(#546993)); 
        border-right: solid 1px #9aa5bb;
        border-top: solid 1px #484e59;
        -webkit-border-top-left-radius: 5px;
        -webkit-border-bottom-right-radius: 5px;
        -webkit-border-top-right-radius: 4px;         
        height: 23.5px;
        width: 23.5px;
        display: inline-block;
        -webkit-transform: rotate(45deg);
        -webkit-mask-image: 
            -webkit-gradient(linear, right top, left bottom, 
                from(#000000), 
                color-stop(0.5,#000000), 
                color-stop(0.5, transparent), 
                to(transparent));
        position: absolute;
        right: -9px;
        top: 2.5px;
        -webkit-background-clip: content;
    }
    .button.bordered.next:hover > span.pointer, .button.bordered.next.touched > span.pointer {
        background-image: 
            -webkit-gradient(linear, left top, right bottom, 
                from(#7d88a5), 
                color-stop(0.3, #58698c),
                color-stop(0.51, #3a4e78), 
                color-stop(0.51, #253c6a), 
                color-stop(0.75, #273f6d),
                to(#273f6d)); 
    }
    /* End Next Bordered Button Styles */

    header.navigation-bar.black > .button.bordered {
        -webkit-box-shadow: 0 1px 1px #242424, 0 -1px 1px #323232; 
        border: solid 1px #54617d;
        border-color: #404040 #262626 #404040 #262626; 
        background-image: 
            -webkit-gradient(linear, left top, left bottom, 
                from(#838383), 
                color-stop(0.5, #444444), 
                color-stop(0.5, #303030), 
                to(#333333)); 
    }
    header.navigation-bar.black > .button.bordered.back > span.pointer {
        z-index: 0;
        background-image: 
            -webkit-gradient(linear, left top, right bottom, 
                color-stop(0.05, #838383), 
                color-stop(0.5, #444444), 
                color-stop(0.5, #303030), 
                color-stop(0.98, #333333)); 
        border-left: solid 1px #262626;
        border-bottom: solid 1px #404040;
        top: 2.35px;
    }

    header.navigation-bar.black > .button.bordered.next > span.pointer {
        z-index: 0;
        background-image: 
            -webkit-gradient(linear, left top, right bottom, 
                color-stop(0.05, #838383), 
                color-stop(0.5, #444444), 
                color-stop(0.5, #303030), 
                color-stop(0.98, #333333)); 
        border-right: solid 1px #404040;
        border-top: solid 1px #262626;
        top: 2.35px;
    }
    header.navigation-bar.black > .button.bordered:hover, header.navigation-bar.black > .button.bordered.touched {
        background-image: 
            -webkit-gradient(linear, left top, left bottom, 
                from(#4286f5), 
                color-stop(0.5, #4286f5),
                color-stop(0.5, #194fdb),
                to(#194fdb));
        -webkit-tap-highlight-color: transparent;
    }
    header.navigation-bar.black > .button.bordered.back:hover > span.pointer, header.navigation-bar.black > .button.back.touched > span.pointer, header.navigation-bar.black > .button.bordered.next:hover > span.pointer, header.navigation-bar.black > .button.next.touched > span.pointer {
        background-image: 
            -webkit-gradient(linear, left top, right bottom, 
                from(#4286f5), 
                color-stop(0.5, #4286f5),
                color-stop(0.5, #194fdb),
                to(#194fdb));
    }

嗨，这是标题及其按钮的 css。它的样式类似于 iPhone 标题和按钮。但是，它只适用于 chrome 或 safari（基于 webkit 的浏览器）。我希望转换此代码以使其在 mozilla 和 IE 中也能工作。请帮助

【问题讨论】：

我们不为您编码......
所以简而言之，您希望我们为您完成工作......如果您需要帮助，您需要缩小范围，找到问题的确切根源，并证明您至少自己尝试过某事。
向我们展示您的html。并使用您的html&css 创建dabblet.com，我们将能够从它开始
它不起作用并不奇怪，大多数属性仅适用于 webkit，因此“-webkit”您还需要为不同的浏览器添加所有替代品。

标签： css

【解决方案1】：

基本上它只适用于 webkit，因为你只是用你的后台代码引用 webkit 浏览器：

-webkit-gradient

您需要做的是解决其他浏览器使用：

-moz-linear-gradient
linear-gradient
etc etc....

仅供参考，试试这些以创建适当的渐变/CSS3 东西：

http://www.colorzilla.com/gradient-editor/

http://css3generator.com/

编辑：别忘了你还需要解决你的其他“-webkit”选择器，比如 -webkit-box-* 但老实说，我认为这不是一个好主意将 box-* 选择器用于简单的菜单/导航项。更好用：

<ul id="navigation">
    <li>nav element 1...</li>
    <li>nav element 2...</li>
</ul>

然后只需使用相关的 CSS 设置您的 html 样式（提示，查看“浮动”方法或内联块），因为这将节省大量 CSS 代码行。

【讨论】：

【解决方案2】：

Prefixr (http://prefixr.com/) 是一款免费工具，可将您的 CSS 转换为适当的跨浏览器 CSS。它并不完美，不会让您的 CSS 在每个浏览器中完美呈现，但它应该可以帮助您。

【讨论】：