<!DOCTYPE html> removes media queries styles
Question
I build a wp template with the following in the header:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9">
In the stylesheet I use @media queries, eg:
@media only screen and (min-width: 1100px) {
#wrapper {width:1280px;}
}
Style and template was fine until I noticed I missed the doctype, so I added this to the header as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9">
No all the styles are incorrect, media queries seem to be ignored, I can see no style in the developer inspector (Firefox, chrome, safari etc).
If I remove the style in the media queries are shown, add it again the styles are removed.
Issue is see on all browswer.
Is there anything obvious I am missing?
2 answers
solution1
1 2015-02-25 12:03:07
Doctype has no effect on your media queries.
You can add some support though .
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width; initial-scale=1.0">
These will offer cross browser reference support and will most likely solve your issue.
See similar post : CSS3 Media Queries - does not work in some browsers (officially supporting MQ)
solution2
0 2016-06-17 22:51:08
I had a similar problem with a style class I was applying to a DIV.
.aclass { ... } within @media and a min-width "disappeared" when I added the DOCTYPE html tag, then "reappeared" and worked when I removed the DOCTYPE .
Explicitly including the element in question solved the disappearing act, that is...
DIV.aclass { ... } works properly.
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.