你必须使用-webkit-语法吗？ [英] Do you have to use -webkit- syntax anymore?

问题描述

我正在使用弹性盒技术来布局我的网页，但是我遇到了一些有关语法的混淆。我感到困惑的是你不得不使用-webkit，或者所有的浏览器都实现了HTML5。我一直在各种网站上寻找答案，一个人说你需要使用-webkit语法，另一个人说，你不必再使用它了。我明白什么弹性框我只是困惑你是否需要使用-webkit-或不。如果我不能有人给我看正确的语法，如果我确实需要使用-webkit-语法可以有人告诉我如何实现我的布局到Firefox，歌剧和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 {
字体：粗体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纯黑色; 
 padding：20px; 
 border-radius：5px; 
} 
 
 #top_menu {
 border：2px纯红色; 
背景：黑色; 
颜色：白色; 
 padding：10px; 
} 
 
 #top_menu li {
 display：inline-block; 
 list-style：none; 
 padding：5px; 
字体：粗体14px tahoma; 
} 
 
 #section {
 display：-webkit-box; 
 -webkit-box-orient：horizo​​ntal; 
} 
 
 #main_section {
 border：1px纯黑色; 
 -webkit-box-flex：1; 
 margin：20px; 
 padding：20px; 
} 
 
 #side_news {
 border：2px solid red; 
 margin：20px 0px; 
 width：220px; 
 padding：30px; 
背景：＃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纯黑色; 
} 
 
文章{
 background：black; 
颜色：白色; 
 border：3px纯红色; 
 padding：20px; 
 margin-bottom：15px; 
} 
 
文章页脚{
 text-align：right; 
 
  

解决方案

框架和我从中学到的东西：为了使事情真正起作用，你还必须全部输入。这意味着简而言之：您应该使用-webkit-前缀，而不使用相同的设置。此外，还有 -o - （Opera）， -moz - （Firefox）， -ms - ，有时 -Ms （IE，是，区分大小写）。很少会有 -khtml - ...但是碰到的机会等于零。我还没有看到任何使用该浏览器的现代浏览器。

复制您的语句可能很痛苦，但这是您如何使CSS跨浏览器兼容。这就是为什么我开始使用PHP来做它，而不是...

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

例如：Google Chrome浏览器似乎认为-webkit是非品牌 -webkit-）版本。 Safari往往忽略品牌版本，并使用非品牌版本。

I'm using the flex box technique to layout my webpage, but I have come across with some confusion about the syntax. What I'm confused about is do you have to use -webkit- anymore or has all browsers implemented HTML5 yet. I have been looking for answers on the various websites and one person says you need to use the -webkit- syntax and another person says you don't have to use it anymore. I understand what flex boxes do I'm just confused on whether you need to use -webkit- or not. If I don't can someone show me the correct syntax and if I do need to use the -webkit- syntax can someone show me how to implement my layout into Firefox, Opera, and IE. I know Chrome and Safari use the -webkit- syntax.

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;
}

解决方案

I have been developing a CSS framework, and fromt hat I learned: To make things work for real, you have to also type it all out. That means in short: You should use the -webkit- prefix, and the same settings without. Besides, there is also -o- (Opera), -moz- (Firefox), -ms- and sometimes -Ms (IE, and yes, case sensitive). Very rarely there might be also -khtml-...but the chance you run into that is equal to zero. I have not seen any modern browser that uses that one any longer.

It might be painful to duplicate your statements, but that is how you make your CSS cross-browser compatible. And that is why I started to use PHP to do it instead...

You can also look up the statements - i.e. box-pack - and see their browser compatibility and syntaxes.

For example: Google Chrome seems to preffer -webkit- over the "non-branded" (no -webkit-) version. Safari tends to ignore the branded version and uses the non-branded version.

这篇关于你必须使用-webkit-语法吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！