I am having problem using media queries for IE8. Suppose I want specific CSS at 1280px resolution, it is working fine of all browsers except IE8.
The CSS applies on IE8 when I increase the resolution from 1280px to 1301px. I think it is taking scrollbars width too.
Media queries are not supported in any version of IE below 9. Use Respond.js. Read the docs for Respond.js
Related
I am displaying a set of properties on Bing map. It works all fine in Chrome, FireFox, IE, and Safari on Windows (version is 5.1.7 - their latest version for Windows). But it doesn't work in Safari 7 on Mac.
When displayed correctly, all properties are located on a green residential area. But on Safari 7, all properties are displayed on the far left of that area - on a totally wrong location. Also, the larger left part of the map is blank (there is no map!).
I saw a similar post Bing Maps Issue on Safari 7. The left part of their map is also blank. The problem there seems not solved. I followed Microsoft's guideline (meta, CSS position/width/height etc), none of them work.
I suspect that's a Bing bug? Or a Safari bug?
Sorry I don't have enough reputation to post images...
Now that I solve the problem, I confirm that this is NOT a bug of Safari or Bing.
the <div> that load the the map is embedded in many other divs, panels, fieldset, Telerik ajax panel, RadTabStrip etc. You have to remove some of divs, and also some styles of divs to make it work. It's tricky, you have to do many tests to finally pin down which element caused the problem and remove that element.
I took me several days to figure this out.
Having a bit of a conundrum with cross-browser compatibility and could use some help.
Our live version linked to below, seems to work perfectly fine on most browsers, including IE9+, but the controls appear hidden in a non-emulated stock out-of-the-box version of IE8:
http://dig-houston.com/portfolio/inspiron
Here's a screenshot of what it looks like in IE8:
At one point, I was still able to slightly see the controls sticking up from the bottom (and click) which lead me to believe something had gone awry in absolute positioning or the rejection of newer CSS techniques. But as my fine tuning progressed and heights were adjusted, I believe the controls were hidden further out of view outside the box.
That being said, I think this is just a CSS issue, but haven't targeted the right styles being applied yet. To anyone else out there using Video.js
I'm having a problem with layout in Safari that works fine in Chrome and FF. It seems that Safari includes the padding within the width while Chrome and FF don't. So what's 630px in FF
due to width + padding is only 600px in Safari. This: Padding in mozilla firefox and in safari seems to show that the box model is different in Safari. If so I would expect a standard solution would already have come up but when I google this, it seems that hardly anyone has this problem.
Is the box model in Safari really different and is there a standard solution? Or do I just have to 'debug' my CSS?
EDIT: apparently it's because the div was using display: table. When I changed it to display: block, it worked as expected. It's still strange though because it's working fine in other browsers (display: table).
Which doctype are you using? When I use < !DOCTYPE html > (the HTML5 doctype declaration) Safari and Chrome's padding behaviour is definitely exactly the same, and as the standards dictate.
In CSS box-sizing handles the box model. By default it's set to the 'normal' but probably incorrect 'content-box'. Support for box-sizing is reasonable across browsers now so you can probably move to 'border-box' but will need to handle it differently in IE6/7 (if you support them).
AFAIK Safari (webkit) should respect this.
If Chrome and Safari are both based on WebKit, does that mean I don't have to test both browsers?
... or are there certain situations where I should explicitly test both Chrome and Safari?
Everything else beside the basic HTML rendering engine is still different. If only basic HTML/CSS compatibility is important, I guess it's fine to test one browser.
However, the JavaScript engines of Chrome and Safari are completely different, vector graphics are rendered by different engines, HTML5/video tag stuff is implemented completely different, etc. The list goes on.
Overall I'd recommend to test with both browsers.
You should test both browsers to be sure. You'll be ok 99% of the time but you want to make sure.
I've tested in Chrome, do I need to test in Safari?
I've noticed Safari handles Asian characters better than Chrome.
Also Chrome and Safari rely on the same Webkit for rendering pages, but their Javascript engines are totally different, so if you use Javascript in your pages you need to check both.
Browsershots will send you screen shots of your page in just about every browser ever made.
Safari uses 'mac' fonts, but Chrome would use 'Windows' fonts. I've noticed that there can sometimes be problems where using a font like Arial, it shows up fine in firefox/chrome/ie, but on Safari, it can cause a line to wrap because the font is slightly bigger.
Yes, but only for your fonts and JavaScripts.
I have noticed some of the default fonts are smaller on Safari then Chrome, also Chrome uses the V8 JavaScript engine which has caused some people problems, especially if you have a lot of form logic.
yes.
Oh, you wanted more detail? Simply, Chrome and Safari have a lot of different features in their implementations, and Safari is pretty widely used. If you expect the general public, and particularly those of us who work on Macs, to use your application, it would behoove you to test in the Safari browser.
Yes, safari and chrome even though they are using webkit the two versions of webkit that are being used are significantly different. So you need to restest.
In a word, No. You can't assume that because it works in one it will definitely work in all cases in the other. Sure, 99% of the time, it might be the same - but 99% isn't 100% - at least, it wasn't last time I checked. Call me a pedantic git if you like.