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

2023年4月12日 198次阅读

我有一节课：

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

在Chrome中总是正常,但对于IE 10正常风格：2％22％2％23％.如何在所有这些浏览器中定义正常工作的填充样式？

最佳答案

/* 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并在那里添加样式或链接标记.他们还允许为浏览器添加条件标记.

<!--[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]-->
点赞