您是否必须再使用 -webkit- 语法？

Question

我正在使用弹性框技术来布局我的网页，但我遇到了一些关于语法的困惑。我感到困惑的是您是否必须再使用 -webkit- 或者所有浏览器都实现了 HTML5。我一直在各种网站上寻找答案，一个人说你需要使用 -webkit- 语法，另一个人说你不必再使用它了。我知道弹性盒子是做什么的我只是对是否需要使用 -webkit- 感到困惑。如果我不能告诉我正确的语法，如果我确实需要使用 -webkit- 语法，那么有人可以告诉我如何在 Firefox、Opera 和 IE 中实现我的布局。我知道 Chrome 和 Safari 使用 -webkit- 语法。

header, section, footer, article , aside, hgroup, nav {
    display: block;
}

* {
    margin: 0px;
    padding: 0px;
}

body {
    width: 100%;
    display: -webkit-box;
    -webkit-box-pack: center;
}

h1 {
    font: bold 20px tahoma;
}

h2 {
    font: bold 14px tahoma;
}

#page_wrap {
    max-width: 1000px;
    margin: 20px 0px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-flex: 1;
}

#top_header {
    background: red;
    border: 4px solid black;
    padding: 20px;
    border-radius: 5px;
}

#top_menu {
    border: 2px solid red;
    background: black;
    color: white;
    padding: 10px;
}

#top_menu li {
    display: inline-block;
    list-style: none;
    padding: 5px;
    font: bold 14px tahoma;
}

#section {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
}

#main_section {
    border: 1px solid black;
    -webkit-box-flex: 1;
    margin: 20px;
    padding: 20px;
}

#side_news {
    border: 2px solid red;
    margin: 20px 0px;
    width: 220px;
    padding: 30px;
    background: #a4a4a4;
    border-radius: 10px;
    -webkit-box-shadow: rgb(110,110,110) 10px 10px 10px;
}

#the_footer {
    clear: both;
    text-align: center;
    padding: 20px;
    border-top: 2px solid black;
}

article {
    background: black;
    color: white;
    border: 3px solid red;
    padding: 20px;
    margin-bottom: 15px;
}

article footer {
    text-align: right;
}

Answer 1

我一直在开发一个 CSS 框架，并从中学到：要使事情真正发挥作用，您还必须将其全部输入。简而言之：您应该使用 -webkit- 前缀，并且不使用相同的设置。此外，还有-o-（Opera）、-moz-（Firefox）、-ms-，有时还有-Ms（IE，是的，区分大小写）。很少有可能还有-khtml-...但是你遇到的机会等于零。我还没有看到任何使用该浏览器的现代浏览器。

重复你的语句可能会很痛苦，但这就是你如何让你的 CSS 跨浏览器兼容。这就是为什么我开始使用 PHP 来代替...

您还可以查看语句 - 即 box-pack - 并查看它们的浏览器兼容性和语法。

例如：Google Chrome 似乎更喜欢 -webkit- 而不是“非品牌”（无 -webkit-）版本。 Safari 倾向于忽略品牌版本而使用非品牌版本。

Answer 2

您永远不能从display: -webkit-box 中删除-webkit 前缀，因为标准化版本不称为box。

相反，它被称为display:flex。相关的弹性盒属性（包括-webkit-box-pack）在“新”标准化弹性盒模型中也都有不同的名称。

话虽如此，您应该更喜欢新的display:flex 模型而不是旧的-webkit-box/-moz-box 模型，因为新版本具有更好的互操作性和跨浏览器支持，因为它实际上是标准化的。

Answer 3

Safari 和 Chrome 在使用过渡、变换、动画、渐变、计算、弹性框和列时需要 -webkit- 前缀。对于border-radius、box-shadow、border-image和text-shadow，除非你想覆盖Safari 5.0等旧版浏览器，否则它并不是真正需要的。