无法在Firefox或IE中加载CSS

Question

After making it so my website changed css depending on resolution, css stopped loading in Firefox and IE. 完成后，我的网站根据分辨率更改了CSS，css停止在Firefox和IE中加载。 However, it seems to still work on chrome even after clearing cache and reloading. 但是，即使清除了缓存并重新加载后，它似乎仍然适用于chrome。 I had cleared the cache in all browsers and attempted reloading multiple times. 我已经清除了所有浏览器中的缓存，并尝试重新加载多次。

<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>

Additionally - some jquery on another page stopped working in all browsers after implementing the multiple style sheets. 此外，在实现多个样式表后，另一个页面上的某些jquery在所有浏览器中均停止工作。 Any advice on how to fix this? 有关如何解决此问题的任何建议？ If I can give you any additonal information, please go ahead and ask. 如果我能给您其他信息，请继续询问。 Website link is here ------------- 网站链接在这里-------------

-thanks -谢谢

--Edited to add that w3c validator thought everything was fine on XHTML 1.0 STRICT -编辑以添加w3c验证器认为XHTML 1.0 STRICT一切都很好

Answer 1

The best way, IMHO, to layout your CSS file is like so: 恕我直言，布局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;
    }
}

Basically what you want to do is seperate out your code into sections. 基本上，您要做的就是将代码分成几部分。 The theme section deals only with things that don't affect the flow of elements in the DOM. 主题部分仅处理不影响DOM中元素流的内容。 The static structure section sets rules that don't change, no matter the screen size. 静态结构部分设置的规则不会改变，无论屏幕大小如何。 The responsive section is where you put the media queries. 响应部分是放置媒体查询的地方。 The best way to find break points for your media queries is the "squish it till it breaks method." 为媒体查询找到断点的最佳方法是“压缩直到断点的方法”。 Meaning close your browser in until the page looks like crap, then add a media query and rearrange the page. 意思是关闭浏览器，直到页面看起来像废话，然后添加媒体查询并重新排列页面。

BTW, old IE doesn't support media queries so you'll want to use IE's conditional comments to add a polyfill called css3-mediaqueries.js. 顺便说一句，旧版IE不支持媒体查询，因此您需要使用IE的条件注释来添加一个名为css3-mediaqueries.js的polyfill。 It's just a JS file that makes media queries work on all browsers. 这只是一个使媒体查询在所有浏览器上都能工作的JS文件。

Edit: Also, follow this link and use the bookmarklet to be able to see what your current screen size is. 编辑：另外，请点击此链接并使用小书签能够查看您当前的屏幕尺寸。 It's incredibly useful for responsive designing. 它对于响应式设计非常有用。

Answer 2

According to http://webdesignerwall.com/tutorials/css3-media-queries , inline media queries are a CSS3 feature. 根据http://webdesignerwall.com/tutorials/css3-media-queries ，嵌入式媒体查询是CSS3的功能。 So browsers not supporting CSS3 will skip it. 因此，不支持CSS3的浏览器将跳过它。

Your options are: 您的选择是：

1) Move all CSS to one file like this: 1）将所有CSS移至一个文件，如下所示：

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

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

2) Drop the width criteria and simply rely on 'screen' and 'handheld' instead of using the whole query in the HTML: 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" />

Hope this helps. 希望这可以帮助。

Answer 3

Try replacing your 尝试更换您的

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

to 至

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

I didn't tried your problem in mobile, but try putting only too if there's a problem in mobile.. and add 我没有在移动设备上尝试过您的问题，但是尝试仅在移动设备出现问题时也放..并添加

<!DOCTYPE html>

In the beginning of the code. 在代码的开头。 Hope this helps.. 希望这可以帮助..

无法在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