较少Css不适用于IE8和IE7

时间：2013-02-26 02:25:16

标签： css internet-explorer internet-explorer-8 less

我在这两个浏览器上都有问题为什么Less Css无法正常工作（没有应用样式表的页面）？在IE9 +上它看起来很正常，就像Chrome，FF和Opera一样。 在屏幕上看：

的来源 Source 的码 

<!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看起来像这里） IE10

IE8 （看看跳过头部的最后一种风格） IE8

你在这里看到的是我看不到的错误吗？

1 个答案:

答案 0 :(得分：2)

您似乎尝试在网站上使用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列表。

相关问题
最新问题