I'm creating some print specific styles using the following:
@media print {
/* Styles */
}
As we are using SASS all the styles get compiled into one stylesheet, styles.css at runtime, which is declared in the <head> of the document as follows:
<link rel='stylesheet' href='/assets/css/styles.css'>
Now when I print from chrome (Ctrl+P), it completely ignores my print styles but Firefox (30.0) is fine. IE(11) is terrible but this is because we have a lot of show/hide panels which IE doesn't seem to like/
Can't for the life of me figure out what's happening. If I emulate print media in Chrome then it loads the styles fine, it's when I actually try and print that it doesn't work. I've tried loads of things, adding, media= attributes, double quotes, changing the order of href etc all to no avail!!
Note, we're not using type anymore as I thought you didn't need to use this anymore. I've tried adding this anyway but it still doesn't work!
I've even tried this: http://lawrencenaman.com/optimisation/print-media-queries-not-working/ but it still doesn't work. It's driving me crazy, any ideas?
UPDATE: So I noticed that when I hit Ctrl + P to print the page, the preview that I see seems to use some of the styles from the print stylesheet but seems to render everything using a mobile media query? I think there may be some conflict with a breakpoint, will update when I get a chance.
UPDATE2: I can see that the print stylesheet is loading at the bottom so this should in theory over write all the other media queries (at least the ones that I'm trying to over write)?
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
