html - 如何在 css hack/媒体查询中扩展 Internet Explorer?
问题描述
我正在使我的网站与 Internet Explorer 兼容。如何在 css hack 中扩展 Internet Explorer 中的网站?
首先,我为 Firefox 编写了网站。这就是为什么我对某些浏览器使用了一些 css hack。现在我想开始在不同的浏览器中扩展网站,我从 Internet Explorer 开始。我使用 css hack 的媒体查询来识别 Internet Explorer,但要扩展网站,我需要另一个媒体查询。我已经尝试将媒体查询“添加”到标识 Internet Explorer 的那个,然后我将其复制min-width
为 600、768 和 998,但它只是使用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 hacks 来识别网站。
对不起我的英语不好,感谢你试图帮助我!
解决方案
如果您使用多个具有 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>
推荐阅读
- azure-devops - 如何将 Azure DevOps Board 和 Repos 隐藏到特定组?
- java - 使用 javacardx.security.derivation 的 Javacard 密钥派生 (hmac)
- laravel - Laravel 模型记录检索
- python-3.x - 这不应该超出范围吗?
- apache-spark - 从小数据集中制作多个数据框的最快方法
- rust - `&mut retval` 和 `retval as *const T as *mut T` 有什么区别?
- jenkins - jenkins shell中的Bash子字符串替换错误
- powerbi - 表关系,以确保在表中的日期重叠时使用日期切片器过滤表
- python - 如何在 Django 中使用 Ajax 来提交表单而无需重定向/刷新,同时调用 views.py 函数?
- python - Python urllib.request.urlopen() 仅在给定“超时”参数时返回,否则永远冻结