无法在Firefox或IE中加载CSS

Question

完成后，我的网站根据分辨率更改了CSS，css停止在Firefox和IE中加载。 但是，即使清除了缓存并重新加载后，它似乎仍然适用于chrome。 我已经清除了所有浏览器中的缓存，并尝试重新加载多次。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media='screen and(min-width:721px)' href='css/master.css'/>
    <link rel='stylesheet' type="text/css" media='screen and(max-width:720px)' href='css/mobile.css'/>
    <script type="text/javascript" src="javascript/script.js"></script>
<title>The Resistance</title>
</head>

此外，在实现多个样式表后，另一个页面上的某些jquery在所有浏览器中均停止工作。 有关如何解决此问题的任何建议？ 如果我能给您其他信息，请继续询问。 网站链接在这里-------------

-谢谢

-编辑以添加w3c验证器认为XHTML 1.0 STRICT一切都很好

Answer 1

恕我直言，布局CSS文件的最佳方法是这样的：

/* Theme style rules */
#wrapper {
    background-color:#444;
    color:white;
    font-family:Verdana, Arial, Times;
}

/* Static structure rules */
#wrapper {
    overflow:hidden;
    width:50em;
}

/* Responsive structure rules */
@media screen and (max-width:1220px) and (min-width:1151px) {
    #wrapper {
        font-size:15px;
    }
}
@media screen and (max-width:1150px) and (min-width:1081px) {
    #wrapper {
        font-size:14px;
    }
}

基本上，您要做的就是将代码分成几部分。 主题部分仅处理不影响DOM中元素流的内容。 静态结构部分设置的规则不会改变，无论屏幕大小如何。 响应部分是放置媒体查询的地方。 为媒体查询找到断点的最佳方法是“压缩直到断点的方法”。 意思是关闭浏览器，直到页面看起来像废话，然后添加媒体查询并重新排列页面。

顺便说一句，旧版IE不支持媒体查询，因此您需要使用IE的条件注释来添加一个名为css3-mediaqueries.js的polyfill。 这只是一个使媒体查询在所有浏览器上都能工作的JS文件。

编辑：另外，请点击此链接并使用小书签能够查看您当前的屏幕尺寸。 它对于响应式设计非常有用。

Answer 2

根据http://webdesignerwall.com/tutorials/css3-media-queries ，嵌入式媒体查询是CSS3的功能。 因此，不支持CSS3的浏览器将跳过它。

您的选择是：

1）将所有CSS移至一个文件，如下所示：

@screen and(min-width:721px) {
  #Your desktop CSS here
}

@screen and(max-width:720px) {
  #Your mobile CSS here
}

2）删除宽度标准，仅依靠“屏幕”和“手持式”，而不是在HTML中使用整个查询：

<link href="css/master.css" media="screen" type="text/css" rel="stylesheet" />
<link href="css/mobile.css" media="handheld" type="text/css" rel="stylesheet" />

希望这可以帮助。

Answer 3

尝试更换您的

<link rel="stylesheet" type="text/css" media='screen and(min-width:721px)' href='css/master.css'/>

至

<link rel="stylesheet" type="text/css" media="only screen and (min-width: 721px)" href="master.css" />

我没有在移动设备上尝试过您的问题，但是尝试仅在移动设备出现问题时也放..并添加

<!DOCTYPE html>

在代码的开头。 希望这可以帮助..

无法在Firefox或IE中加载CSS

问题描述

3 个解决方案

解决方案1
1 已采纳 2013-04-23 04:00:13

解决方案2
0 2013-04-23 03:43:00

解决方案3
0 2013-04-23 03:51:08

无法在Firefox或IE中加载CSS

问题描述

3 个解决方案

解决方案1 1 已采纳 2013-04-23 04:00:13

解决方案2 0 2013-04-23 03:43:00

解决方案3 0 2013-04-23 03:51:08

解决方案1
1 已采纳 2013-04-23 04:00:13

解决方案2
0 2013-04-23 03:43:00

解决方案3
0 2013-04-23 03:51:08