Less Css 在 IE8 和 IE7 上不起作用
Posted
技术标签:
【中文标题】Less Css 在 IE8 和 IE7 上不起作用【英文标题】：Less Css not working on IE8 and IE7 【发布时间】：2013-02-11 09:11:06 【问题描述】：我有疑问，为什么在这两个浏览器上，Less Css 都不起作用（页面没有应用样式表）？在 IE9+ 上，它看起来像在 Chrome、FF 和 Opera 上一样。 看屏幕： 来源 代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mansion</title>
<link rel="stylesheet" href="/Content/normalize.css" media="all"/>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,700,900,300' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>
<link rel="stylesheet/less" href="/Content/siteHD.less" media="screen and (max-width: 1920px)" />
<link rel="stylesheet/less" href="/Content/site1024.less" media="screen and (max-width: 1024px)" />
<link rel="stylesheet/less" href="/Content/site768.less" media="screen and (max-width: 768px)" />
<link rel="stylesheet/less" href="/Content/site640.less" media="screen and (max-width: 640px)" />
<link rel="stylesheet/less" href="/Content/site320.less" media="screen and (max-width: 320px)" />
</head>
<body>...</body>
</html>
IE10（IE9 看起来像这里） IE8（查看最后一个跳过头部的样式）
你看到这里有什么我看不到的地方有问题吗？
【问题讨论】：
试过了，没有任何改变。看起来嵌套规则不起作用。只工作其中一些 嘿 WooCaSh，如果我的回答是正确的和/或对您有所帮助，请您检查一下，以便下一个搜索此问题的人？ 【参考方案1】：您似乎正在尝试在您的网站上使用 LESS 文件而不包括 less.js 库，这是将您的 LESS 代码转换为浏览器可以理解的 CSS 所必需的。
从页面顶部的lesscss.org 下载less.js，然后将其包含在您的</head> 标签之前：
<script src="less.js" type="text/javascript"></script>
显然，您需要将路径更改为您在网站上存储 JS 文件的任何位置。请注意，此文件将包含在您的样式表之后。
您发布的代码示例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mansion</title>
<link rel="stylesheet" href="/Content/normalize.css" media="all"/>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,700,900,300' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>
<link rel="stylesheet/less" href="/Content/siteHD.less" media="screen and (max-width: 1920px)" />
<link rel="stylesheet/less" href="/Content/site1024.less" media="screen and (max-width: 1024px)" />
<link rel="stylesheet/less" href="/Content/site768.less" media="screen and (max-width: 768px)" />
<link rel="stylesheet/less" href="/Content/site640.less" media="screen and (max-width: 640px)" />
<link rel="stylesheet/less" href="/Content/site320.less" media="screen and (max-width: 320px)" />
<script src="less.js" type="text/javascript"></script>
</head>
<body>...</body>
</html>
另一方面，您可能应该看看使用一个可用的编译器将您的 LESS 代码编译为一个或多个 CSS 文件。查看可用GUI compilers that use LESS 的列表。
【讨论】：
难道LESS不能在IE8及更低版本的浏览器中编译吗？以上是关于Less Css 在 IE8 和 IE7 上不起作用的主要内容，如果未能解决你的问题，请参考以下文章