necolas/normalize.css — pull request #299 by JohnAlbin (2014-02-11 10:48:52+00:00)
Title: Update code comments for IE 10/11. #299

In my Sass/Compass version of Normalize, I can turn on or off normalize rules based on the developers choice of "minimum supported browser versions". So if you don't want IE 8 and lower, you only get the relavent rules from normalize. So I track the code comments of normalize.css carefully.

In normalize.css 3.0.0 I noticed a couple code comments got IE 10 added to them, but it looks like a comprehensive review of all the "IE" comments is needed now that IE 11 is out.

I made a copy of normalize.css' test.html page and removed the normalize.css stylesheet, so that I could see the un-corrected bugs and then tested IE 10 and IE 11 using browserstack. Note: it takes quite a while to do the testing and screenshots, so I only tested rules that previously mentioned IE. I'd need to automate the screenshots if I wanted to test all the rules.

For any code comment mentioning "IE 8/9" or "IE 8/9/10" or "IE 8+" about a bug that was still broken in IE 11, I changed to just be "IE"; that seemed in line with other code comments. All other comment changes were straight-forward, except for test 3.1.

## 3.1 HTML5 elements should render as block

It looks like the HTML5 element "block" display has been fixed for almost all elements. But I noticed that IE 10/11, as well as Firefox 27, still use an inline display of the `summary` element. I made a note of that.

![3 1-summary-ie10](https://f.cloud.github.com/assets/33429/2135834/e9a601a0-9305-11e3-8e87-4a7aff47c325.png)
![3 1-summary-ie11](https://f.cloud.github.com/assets/33429/2135836/e9a7b77a-9305-11e3-9837-1e6625eb667f.png)
![3 1-summary-firefox27](https://f.cloud.github.com/assets/33429/2135835/e9a6200e-9305-11e3-9610-474676a22904.png)

## 4.1 audio, canvas, progress, video should render as inline-block and baseline-aligned

This has been fixed in IE 10/11.

![4 1-inline-block-ie11](https://f.cloud.github.com/assets/33429/2135855/4609a19a-9306-11e3-9d79-fc323ebe179e.png)
![4 1-inline-block-ie10](https://f.cloud.github.com/assets/33429/2135856/4609c012-9306-11e3-94c1-df123a36bd06.png)

## 5.1 template, [hidden] should not display

Now this is an interesting one. In IE 10, `template` is hidden, but `[hidden]` is not. And in IE 11, we have the reverse. So there's a regression in IE 11 for `template`.

![5 1-template-ie11](https://f.cloud.github.com/assets/33429/2135869/63a0dc46-9306-11e3-9ac1-365d50dc2789.png)
![5 1-hidden-ie10](https://f.cloud.github.com/assets/33429/2135870/63a1be5e-9306-11e3-8bc4-4bba6697d548.png)

## 6.1 links should have a transparent background when active

Fixed in IE 11.

![6 1-anchor-bg-ie10](https://f.cloud.github.com/assets/33429/2135881/a4c3ca4e-9306-11e3-8105-5b48af6ae328.png)
![6 1-anchor-bg-ie11](https://f.cloud.github.com/assets/33429/2135882/a50bb5c0-9306-11e3-9920-cfb5a1cf68b9.png)

## 7.1 abbr[title] should have a dotted bottom border

Still broken in IE 10/11.

![7 1-abbr-ie10](https://f.cloud.github.com/assets/33429/2135891/c520a4e2-9306-11e3-8b11-50d55e2e2afb.png)
![7 1-abbr-ie11](https://f.cloud.github.com/assets/33429/2135892/c5695872-9306-11e3-8271-e3aeb4cb6ab4.png)

## 11.1 mark should have a yellow background

Fixed in IE 10/11.

![11 1-mark-ie10](https://f.cloud.github.com/assets/33429/2135896/d9cfc9b8-9306-11e3-9049-147975494a3f.png)
![11 1-mark-ie11](https://f.cloud.github.com/assets/33429/2135897/d9d023c2-9306-11e3-9bc6-1f147457d253.png)

## 14.1 img should not have a border when wrapped in an anchor

Still broken in IE 10, but fixed in IE 11.

![14 1-anchor-border-ie10](https://f.cloud.github.com/assets/33429/2135909/27e2919e-9307-11e3-92b6-d7ceed7804eb.png)
![14 1-anchor-border-ie11](https://f.cloud.github.com/assets/33429/2135910/27e29838-9307-11e3-9a0f-83ee260831c0.png)

## 15.1 svg should not overflow

Still broken in IE 10/11. I removed the word "oddly" from the comment, since its superfluous. All browser bugs are "odd". :-)

![15 1-svg-ie10](https://f.cloud.github.com/assets/33429/2135914/3dd1a382-9307-11e3-9ed8-702a34833822.png)
![15 1-svg-ie11](https://f.cloud.github.com/assets/33429/2135915/3dd2124a-9307-11e3-85c1-c7a5a8bcc62d.png)

## 16.1 figure should have margins

Fixed in IE 10/11.

![16 1-figure-ie11](https://f.cloud.github.com/assets/33429/2135925/844e498c-9307-11e3-835d-9af95ddfb87c.png)
![16 1-figure-ie10](https://f.cloud.github.com/assets/33429/2135926/844e7858-9307-11e3-98f3-e9b58b179d08.png)

## 21.1 button should have visible overflow

Still broken in IE 10/11.

![21 1-button-overflow-ie10](https://f.cloud.github.com/assets/33429/2135937/98a0fb32-9307-11e3-817b-af762560df2c.png)
![21 1-button-overflow-ie11](https://f.cloud.github.com/assets/33429/2135938/98a12be8-9307-11e3-8d8a-89650aed01ec.png)

## 22.1 button, select should not inherit text-transform

Still broken in IE 10/11.

![22 1-button-text-transform-ie11](https://f.cloud.github.com/assets/33429/2135972/7a3051b0-9308-11e3-9399-cbe9feb53b49.png)
![22 1-button-text-transform-ie10](https://f.cloud.github.com/assets/33429/2135973/7a336102-9308-11e3-9f88-0d3b7de3f808.png)

## 27.1 input[type="checkbox"], input[type="radio"] should have a border-box box model

Broken in IE 10, but fixed in IE 11.

![27 1-input-box-sizing-ie10](https://f.cloud.github.com/assets/33429/2135977/902a0d1c-9308-11e3-924f-c4932bfd6eae.png)
![27 1-input-box-sizing-ie11](https://f.cloud.github.com/assets/33429/2135978/9071ab18-9308-11e3-8c95-db034399f70b.png)

## 27.2 input[type="checkbox"], input[type="radio"] should not have padding

Broken in IE 10, but fixed in IE 11.

![27 2-input-padding-ie10](https://f.cloud.github.com/assets/33429/2135989/b225b650-9308-11e3-94e6-f2f48fe9530b.png)
![27 2-input-padding-ie11](https://f.cloud.github.com/assets/33429/2135990/b2260128-9308-11e3-996c-3fbcf9306856.png)

## 31.1 legend should inherit color

Still broken in IE 10/11.

![31 1-legend-color-ie10](https://f.cloud.github.com/assets/33429/2135995/dac539c8-9308-11e3-9ffb-97a3e41d19cb.png)
![31 1-legend-color-ie11](https://f.cloud.github.com/assets/33429/2135996/dac55480-9308-11e3-85f4-5d57fa2cce99.png)

## 32.1 textarea should not have a scrollbar unless overflowing

Still broken in IE 10/11.

![32 1-textarea-scrollbar-ie10](https://f.cloud.github.com/assets/33429/2136000/f5891414-9308-11e3-88ca-acf997810a25.png)
![32 1-textarea-scrollbar-ie11](https://f.cloud.github.com/assets/33429/2136001/f58a502c-9308-11e3-9427-feafd24acd1e.png)