Question

如果我为iphone和Android用户制作网站，并假设他们将使用iPhone和Android的默认浏览器，我使用一些只在Web-kit上运行的CSS。

正如我们所知道的iphone“Opera Mini”也可用，而Android“Firefox 4”已经推出。

因此，如果我想要与所有浏览器兼容，因为用户可以使用任何浏览器。不应该使用CSS3高级webkit转换和其他东西吗？

因为我认为最新的Opera Mini和Firefox 4 for Android不会像Web-kit浏览器那样支持CSS3。

示例：我想使用此http://vxjs.org/buttons/SubpixelButtons-2/buttons.html

在iphone和Android上，但它在Android默认浏览器和Firefox 4（Android）中看起来很好看它很糟糕

.button.bordered.back:before {
    content: " ";
    display: block;
    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:before, .button.bordered.back.touched:before {
    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));
}

修改

为什么这是http://vxjs.org/buttons/SubpixelButtons-2/buttons.html

在所有使用相同渲染引擎的情况下，在其他Google Chrome和Android浏览器中看起来不合适。

Answer 1

最好的方法是根据目标用户组做出决定：尝试找出他们使用哪些浏览器的版本，然后决定使用哪些功能，以便大多数目标用户可以使用您构建的内容。

检查浏览器支持我发现有用的各种功能的工具是caniuse.com。

此外，重要的是要认识到CSS3不是一个全有或全无的决定。你总是可以在基本的浏览器中构建看起来“OK”的东西，并为更现代的浏览器添加额外的眼睛（例如使用-webkit -...或-moz -... CSS选择器），这些将被忽略旧浏览器。 caniuse工具将帮助您完美匹配选择单个CSS功能以匹配目标用户组。

CSS3支持：iPhone Safari VS Android默认浏览器？

1 个答案: