如何在不同的浏览器中将不同的css样式应用于一个类

Question

我有一个班级：

.banner {
  padding: 2% 33% 2% 20%;
}

在Chrome中总是正常，但对于IE 10+正常风格：2％22％2％23％。如何定义padding样式以便在所有这些浏览器中正常工作？

Answer 1

/* Chrome 28+ (also affects Safari and MS Edge now) */
@supports (-webkit-appearance:none) { /* Needed styles */ }

/* Firefox (any) */
_:-moz-tree-row(hover), .selector { /* Needed styles */ }

/* Internet Explorer 11+ */
_:-ms-fullscreen, :root .selector { /* Needed styles */ }

/* Internet Explorer 10+ */
_:-ms-lang(x), .selector { /* Needed styles */ }

/* Also Internet Explorer 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* Needed styles */
}

/* Internet Explorer 9+ */
_::selection, .selector { /* Needed styles */ }

/* Safari 6.1+, Chrome for iOS */
@media screen and (min-color-index: 0) and(-webkit-min-device-pixel-ratio: 0) { @media {
  /* Needed styles */
}}

如果您需要IE9 -

对于IE9-您可以应用conditional comments并在其中添加style或link标记。他们还允许为浏览器添加条件标记。

<!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->

<!--[if IE 7]><p>Welcome to Internet Explorer 7!</p><![endif]-->
<!--[if !(IE 7)]><p>You are not using version 7.</p><![endif]-->

<!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]-->
<!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->
<!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->

Answer 2

你应该避免为特定的浏览器修复你的CSS，但如果你真的想要试验它有多种解决方案。 你可以在这里找到很多有用的代码http://browserhacks.com/

修复特定浏览器的CSS：

选择器黑客

/* IE6 and below */
* html #one { color: red }

/* IE7 */
*:first-child+html #two { color: red } 

/* IE7, FF, Safari, Opera  */
html>body #three { color: red }

/* IE8, FF, Safari, Opera (Everything but IE 6,7) */
html>/**/body #four { color: red }

/* Opera 9.27 and below, Safari 2 */
html:first-child #five { color: red }

属性黑客

.class {
  width:200px; /* All browsers */
  *width:250px; /* IE */
  _width:300px; /* IE6 */
  .width:200px; /* IE7 */
}

/* IE6 */
#twentyseven { _color: blue }

/* IE6, IE7 */
#twentyeight { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#twentynine { color/**/: blue }

/* IE6, IE7, IE8 */
#thirty { color: blue\9; }

/* IE7, IE8 */
#thirtyone { color/*\**/: blue\9; }

条件评论

<!--[if IE]>
    According to the conditional comment this is IE<br />
    <link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 6]>
    According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
    According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
    According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
    According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
    According to the conditional comment this is IE 8 or higher<br />
<![endif]-->

Answer 3

我使用波纹管样式强有力地解决了我的任务：

/* IE 9+ */
_::selection, .baner{
padding: 2% 33% 2% 20%;
}

/* Chrome */
.baner{
-webkit-padding-after: 2%;
-webkit-padding-before: 22%;
-webkit-padding-start: 2%;
-webkit-padding-end: 23%;
}