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似乎在“非品牌”（no -webkit-）版本上提供了-webkit-。 Safari倾向于忽略品牌版本并使用非品牌版本。

Answer 2

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

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

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

Answer 3

使用转场，转换，动画，渐变，计算，弹性框和列时，Safari和Chrome需要-webkit-前缀。对于border-radius，box-shadow，border-image和text-shadow，除非你想要覆盖Safari 5.0之类的旧浏览器，否则它并不是必需的。

你不得不再使用-webkit-语法吗？

3 个答案: