If your slightly strange CSS code works on all browsers on Windows, will it work on Mac and Linux?

Question

I am testing some weird-looking CSS code that I wrote (I'm using a mix of percentages and pixel values for width of DIVs, basically). While I'm not convinced that it's right, it works perfectly on all screen sizes on IE 5.5, IE 6.0 (thanks to these guys!), IE 7.0, Firefox 3.0 and Safari 3.12... all on Windows XP. Do I need to further worry about testing the code on Mac and Linux, or will it most likely work on these two without fail?

---

Edit:

After a few months of working with this problem, I've found that Safari and Firefox are amazingly consistent between Mac and PC.

Answer 1

in my experience FF3 on Mac and Win does not render exactly the same, but still close enough to not bother checking both.

Answer 2

It will most likely work, though I have seen instances where something works in FF3 for Windows, yet doesn't for FF3 on OS X.

Answer 3

will it work on Mac and Linux?

Not necessarily.

Font rendering is the biggest issue with that sort of cross-platform. Some fonts that are available on Windows are not included in others by default and OSX has a very heavy font-rendering model (though Safari on Windows should show this - at least it used to).

General box models, padding, margins, et al should all be standard.

Answer 4

the mac realm is very tricky. different operating system versions have different safari versions so it makes it really tough without having a bunch of macs for testing. if it looks good on safari for windows, chances are it will look good on safari for the mac. especially if your main concern is with div widths.

linux has a slew of browsers and i seriously doubt anyone out there tests all of them. since firefox runs in linux, you've got a good percentage of the linux market covered.

you already have over 95% of the browser market covered with the browsers you have tested.

Answer 5

OS X has many WebKit-based browsers, i.e. Safari/Shiira/iCab/OmniWeb, as well as Firefox/SeaMonkey/Camino and Opera. I don't have stats, but I'd guess that this covers at least 98% of all users.

Results from Debian Popularity Contest:

w3m            85.93%
iceweasel      60.35%
lynx           25.71%
konqueror      21.95%
links           9.23%
iceape-browser  6.69%
elinks          6.51%
links2          4.09%
dillo           2.70%
galeon          2.35%
epiphany        0.79%
w3m-el          0.75%
kazehakase      0.58%
midori          0.30%
arora           0.29%

(This does not track users with non-[DFSG]free* software, such as Mozilla Firefox and Opera.) Linux users are a very diverse crowd; even if you test with Mozilla Firefox, Opera, and Konqueror from KDE 4 on Windows, you're not even close to covering most of the userbase.

That being said, if you narrow your focus to browsers with support for modern CSS, you'll find that there's only a few underlying engines: Trident (IE), Gecko (Mozilla), WebKit (Apple), KHTML (KDE), and Presto (Opera). Taking these individually:

• Trident: only used by IE in Windows, you're already testing it.
• Gecko: used by the Mozilla Suite's browser (Mozilla Navigator, SeaMonkey Navigator, IceApe Navigator, Mozilla Firefox, IceCat, IceApe, Epiphany-Gecko, Galeon, Kazehakase-Gecko). Font, image, and plugin rendering do vary wildly from platform to platform.
• WebKit: used by Safari/Shiira/iCab/Omniweb, Google Chrome, Epiphany-WebKit, Kazehakase-WebKit, Arora. Rendering should be completely consistent across all OS X browsers, as they use the system-provided WebKit library, but Safari and Google Chrome on Windows have very different drawing engines underneath, and on Linux there's both Gtk+ and Qt versions, with different behavior.
• KHTML: WebKit was forked from it, but its development has continued independently, and so there is a fair amount of divergence. Used primarily by Konqueror. KDE 4's Konqueror has been ported to Windows and OS X, behaving very similarly; however, KDE 4's KHTML has advanced significantly over KDE 3's, still in common usage.
• Presto, used in Opera 7 and above. Consistent across platforms.

As mentioned by another answer, HTML parsing and the CSS box model for each engine is unchanged across platforms. It's only the "little" stuff like fonts, images, and plugins which will act differently.

Answer 6

http://browsershots.org/

This will allow you to view your site in multiple browsers across multiple platforms (Linux Included). However, may I stress that the chances of you getting your website to look 100% identical in each one is virtually impossible, and sometimes you have to settle for 99%.

Think about your target audience and what browser/OS they're typically going to use. Also, after the site is up, run some stat tracking (like Google analytics) and identify what's being used by your audience.

Answer 7

I concur, font rendering will vary on FF3 win/mac and has caused some positioning issues for me