Question

媒体查询不适用于我的网页在IE11中无法正常工作。所以我想我会创建一个简单的测试HTML页面。它仍然在IE11中失败 - 即使它适用于Chrome和Firefox以及Android浏览器。

以下是代码：

＆＃13;

<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'><html>
<head>
<title>Foo</title>
<style type="text/css">

@media (min-width: 640px) {
  h1 {font-size:56px;color:#0f0;}
}

@media (max-width: 640px) {
  h1 {font-size:9px;color:#00f;}
}
</style>
</head>

<body>
<h1>Test</h1>
</body>
</html>

＆＃13;

IE只是忽略所有样式并检查它已替换检查窗口中的样式的代码：

<STYLE type=text/css>
@media Unknown    
{
H1 {
    FONT-SIZE: 56px; COLOR: #0f0
}
H1 {
    FONT-SIZE: 9px; COLOR: #00f
}

}
</STYLE>

我甚至尝试过：

@media all and (min-width: 640px) {
  h1 {font-size:56px;color:#0f0;}
}

@media all and (max-width: 640px) {
  h1 {font-size:9px;color:#00f;}
}

......还有......

@media all (min-device-width: 640px) {
  h1 {font-size:56px;color:#0f0;}
}

@media (max-device-width: 640px) {
  h1 {font-size:9px;color:#00f;}
}

...和...

@media all (min-width: 640px) and (max-width:1920) {
  h1 {font-size:56px;color:#0f0;}
}

@media all (max-width: 640px) {
  h1 {font-size:9px;color:#00f;}
}

我正在测试代码的PC上有两个屏幕.... 这就是为什么IE无法确定媒体??

非常讨厌。无法忍受IE。如果有人能够阐明CSS为什么不能在IE上工作，我将非常感激。

Answer 1

使用更新的doctype和html标签尝试我的代码

＆＃13;

<!doctype html>
<html lang="en">
<head>
<title>Foo</title>
<style type="text/css">

@media (min-width: 640px) {
  h1 {font-size:56px;color:#0f0;}
}

@media (max-width: 640px) {
  h1 {font-size:9px;color:#00f;}
}
</style>
</head>

<body>
<h1>Test</h1>
</body>
</html>

＆＃13;

在IE11上@media Unknown

1 个答案: