Less Css not working on IE8 and IE7
Question
I have question why Less Css not working (page without applied stylesheets) on this both browsers? On IE9+ it looks normal like on Chrome, FF and Opera too. Look on screens:
Source code:
<!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 look like here)
IE8 (look on last style which jump over head section)
Are you see here something wrong what I cannot see?
1 answers
solution1
2 2013-10-15 08:47:27
It seems you are trying to use LESS files on your site without including the less.js library, which is required to translate your LESS code into CSS that the browsers can understand.
Download less.js from the top of the page at lesscss.org , and then include it just before your </head> tag:
<script src="less.js" type="text/javascript"></script>
Obviously you'll need to change the path to wherever you store the JS file on your website. Please note that this file is to be included after your stylesheets.
Example with your posted code:
<!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>
On another note, you should probably take a look at compiling your LESS code to one or more CSS files using one of the available compilers. Check out the list of available GUI compilers that use LESS .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.