Twenty Twelve: verify IE7, IE8, and IE9 support

[obenland]

As the title suggests.

Probably just a few layout tweaks needed.

Related: #20198, #20190

21440.matchMedia.patch​ is an attempt to fix the JS error due to a missing window.matchMedia() method. An alternative would be to add something like ​matchMedia.js.

The layout in IE 7 and IE 8 is almost the same (width is shifted to 100% as described in #20198), the only difference is that main menu is broken in IE 7 (21440.ie7.png​).

It's probably the media queries that are causing this.

An easy way out could be adding another script to the <!--[if lt IE 9]> conditional, like ​respond.js.

21440.image-unit-test.diff​ doesn't help with IE8 styling, but makes the IE8 hack address IE8 only. Fixes the 3rd Image Test in Theme Unit Test for all browsers.
Needs testing in IE8!

Replying to obenland:

but makes the IE8 hack address IE8 only.

Per @iandstewart, avoiding targeting just IE8 was intentional for Twenty Eleven (ticket:18775:11).

Talking it over with drewstrojny: For IE7 we could just show mobile view, it doesn't need to have media query support.

Input/Submit buttons on search widget and password protected fields need margin/height work in IE9 and down.

As the widths and floats are declared in a media query IE7 and IE8 didn't haven't the correct layouts. Normally on clients sites I would address this with a JavaScript polyfill however I figured it would be better to address this with classes for Internet Explorer similar to how Twenty Eleven does and I added some IE7 and IE8 CSS conditionals to fix the layout.

I'm open to any suggestions of a better way to do this though :)

Replying to sennza:

As the widths and floats are declared in a media query IE7 and IE8 didn't haven't the correct layouts. Normally on clients sites I would address this with a JavaScript polyfill however I figured it would be better to address this with classes for Internet Explorer similar to how Twenty Eleven does and I added some IE7 and IE8 CSS conditionals to fix the layout.

I'm open to any suggestions of a better way to do this though :)

Argh. I didn't realize you uploaded a patch for this before submitting #21489. Very sorry about that.

Two solutions seemed to be proposed here: 1) CSS-based adjustments (see @sennza's patch) and 2) media queries for IE7/IE8 (see latest two patches). My preference is for media queries here but would love to hear other thoughts on this.

With 21440.patch​, the layout looks proper in both IE 7 and IE 8 (the menu is still broken in IE 7 though, see 21440.ie7.png​).

21440.2.patch​ adds body background color as well (and fixes tabs vs. spaces).

From chellycat in #21486

Removing width: auto from images, which was causing images resized in the editor to appear full width. The "width: auto" is an IE8 specific fix and should be moved to IE8-specific styles.

See patch on that ticket, would require adding the html element class switch to add .ie8 hooks.

Replying to lancewillett:

From chellycat in #21486

Removing width: auto from images, which was causing images resized in the editor to appear full width. The "width: auto" is an IE8 specific fix and should be moved to IE8-specific styles.

See patch on that ticket, would require adding the html element class switch to add .ie8 hooks.

21440.image-unit-test.diff​ doesn't. Would be more of a hack though.

In [21475]:

Twenty Twelve: add polyfill JS for matchMedia rules, avoids JS error in older IE versions. See #21440.

In [21482]:

Twenty Twelve: add basic styles for IE7 and IE8, supports basic layout now with the small-nav styles. Props obenland, closes #21440.

Replying to lancewillett:

From chellycat in #21486

Removing width: auto from images, which was causing images resized in the editor to appear full width. The "width: auto" is an IE8 specific fix and should be moved to IE8-specific styles.

Not addressed yet. With the conditional .ie class in place it's a piece of cake.

Makes Image Test, page 3, in Theme Unit Test valid

21440.image-width.diff​ Also makes Image Test, page 3, in Theme Unit Test valid

In [21516]:

Twenty Twelve: move IE8 styles to specific IE selector, props obenland. Closes #21440.

@lancewillett, shouldn't there be some props for @sennza there too? I see his patch there and remember discussion about it at the Dev Hack Day after WCSF.