我正在使我的网站与 Internet Explorer 兼容。如何在 Internet Explorer 中使用 css hack 缩放网站？
首先，我为 firefox 编写了网站代码。这就是为什么我对某些浏览器使用了一些 css hack。现在我想开始在不同的浏览器中扩展网站，我开始使用 Internet Explorer。我对 css hack 使用媒体查询来识别 Internet Explorer，但要扩展网站，我需要另一个媒体查询。我已经尝试将媒体查询“添加”到标识 Internet Explorer 的媒体查询，然后我用 600、768 和 998 的 min-width 复制了它，但它只适用于 min-width: 600px 并忽略其他媒体查询。那么还有另一种方法可以在 Internet Explorer 中扩展(只是!)网站，还是我编码错误？我对 chrome 也有同样的问题，我没有使用媒体查询，但我仍然不在那里工作。
/*IE*/ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
img.Marat {max-width: 13%;margin-left: 62%;height: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
table.table {margin-top:15%;width:150%;margin-left:-325%;}
.Abstand4 {margin-left:-130%;}
img.Bild4 {margin-left:-1100%;max-width: 80%;height: auto;}
img.Bild6 {margin-left:-410%;margin-top:8.5%;max-width: 58%;height: auto;}
}
/*Chrome*/ @supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
img.Marat {max-width: 50%;margin-left: -50%;height: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
table.table {margin-top:15%;width:150%;margin-left:-20%;}
.Abstand4 {margin-left:-130%;}
img.Bild4 {margin-left:-1100%;max-width: 80%;height: auto;}
img.Bild6 {margin-left:-410%;margin-top:8.5%;max-width: 58%;height: auto;}
}
}
我想在 Internet Explorer/chrome 中扩展网站，但我不知道该怎么做，因为我必须使用 css hack 来识别网站。
抱歉我的英语不好，感谢您试图帮助我!
最佳答案
如果你使用多个带有 min-width 的媒体查询，你应该把最小值放在第一个，最大值放在最后，像这样:
<head>
<meta charset="utf-8" />
<title></title>
<style>
/* Set the background color of body to tan */
body {
background-color: tan;
}
@media screen and (min-width:600px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
body {
background-color: blue;
}
}
@media screen and (min-width:768px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
body {
background-color: olive;
}
}
@media screen and (min-width:998px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
body {
background-color: aqua;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
按此顺序，媒体查询在 IE10+ 上运行良好。如果顺序错误，下面的媒体查询将不起作用。
在Chrome浏览器中，我们也应该遵循这个规则。您可以引用以下代码:
<head>
<meta charset="utf-8" />
<title></title>
<style>
/* Set the background color of body to tan */
body {
background-color: tan;
}
@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee)) and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
@media screen and (min-width:600px) {
body {
background-color: blue;
}
}
@media screen and (min-width:768px) {
body {
background-color: olive;
}
}
@media screen and (min-width:998px) {
body {
background-color: aqua;
}
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
关于html - 如何在 css hack/媒体查询中扩展 Internet Explorer？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55992650/