Add IE9 correction for SVG overflow, fix #16. Update demo to include explicit <img> and <svg> tests.

This commit is contained in:
Nicolas Gallagher 2011-06-21 18:33:36 +01:00
parent 7f8442aa01
commit 8cece82659
2 changed files with 41 additions and 17 deletions

View File

@ -61,7 +61,7 @@
The <dfn>dfn element</dfn> example<br>
The <em>em element</em> example<br>
The <i>i element</i> example<br>
The img element <img src="http://placehold.it/16x16" alt=""> example<br>
The img element <img src="http://placekitten.com/16/16" alt=""> example<br>
The <ins>ins element</ins> example<br>
The <kbd>kbd element</kbd> example<br>
The <mark>mark element</mark> example<br>
@ -78,6 +78,17 @@
The <u>u element</u> example
</p>
<h1>Embedded content</h1>
<h3>img</h3>
<img src="http://placekitten.com/100/100" alt="">
<a href="#"><img src="http://placekitten.com/100/100" alt=""></a>
<h3>svg</h3>
<svg style="width:100px; height:100px;"><circle cx="100" cy="100" r="100" fill="#ff0000"></svg>
<h1>Grouping content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
@ -158,9 +169,9 @@
</dl>
<h3>figure</h3>
<figure>
<img src="http://placehold.it/400x200" alt="">
<img src="http://placekitten.com/400/200" alt="">
<figcaption>Figcaption content</figcaption>
</figure>
@ -250,7 +261,7 @@
<fieldset>
<legend>Clickable inputs and buttons</legend>
<p><input type="image" src="http://placehold.it/90x24" alt="Image (input)"></p>
<p><input type="image" src="http://placekitten.com/90/24" alt="Image (input)"></p>
<p><input type="reset" value="Reset (input)"></p>
<p><input type="button" value="Button (input)"></p>
<p><input type="submit" value="Submit (input)"></p>
@ -283,7 +294,7 @@
<div><select><option>Option 01</option><option>Option 02</option></select></div>
<div><textarea cols="30" rows="5" >Textarea text</textarea></div>
<div><input type="image" src="http://placehold.it/90x24" alt="Image (input)"></div>
<div><input type="image" src="http://placekitten.com/90/24" alt="Image (input)"></div>
<div><input type="reset" value="Reset (input)"></div>
<div><input type="button" value="Button (input)"></div>
<div><input type="submit" value="Submit (input)"></div>

37
normalize.css vendored
View File

@ -1,4 +1,4 @@
/*! normalize.css 2011-06-21T02:22 http://github.com/necolas/normalize.css */
/*! normalize.css 2011-06-21T18:23 UTC · http://github.com/necolas/normalize.css */
/* =============================================================================
HTML5 element display
@ -77,17 +77,6 @@ textarea {
font-family: sans-serif;
}
/*
* 1. Removes border when inside 'a' element in IE6/7/8/9
* 2. Improves image quality when scaled in IE7
* code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
*/
img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
}
/* =============================================================================
Links
@ -251,6 +240,30 @@ nav ol {
}
/* =============================================================================
Embedded content
========================================================================== */
/*
* 1. Removes border when inside 'a' element in IE6/7/8/9
* 2. Improves image quality when scaled in IE7
* code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
*/
img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
}
/*
* Corrects overflow displayed oddly in IE9
*/
svg:not(:root) {
overflow: hidden;
}
/* =============================================================================
Figures
========================================================================== */