0

我有疑问，为什么在这两个浏览器上，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 看起来像这里） IE10

IE8（看看最后一个跳过头部分的样式） IE8

你在这里看到我看不到的东西有问题吗？

4

1 回答 1

2

您似乎正在尝试在您的网站上使用 LESS 文件而不包括less.js库，这是将您的 LESS 代码转换为浏览器可以理解的 CSS 所必需的。

从lesscss.orgless.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 文件。查看使用 LESS 的可用 GUI 编译器列表。

于 2013-10-15T08:47:27.877 回答