Skip to content

Instantly share code, notes, and snippets.

1. Height and max-height at 100%;
2. HTML may need 100% to expand all the way to viewport height(browser height), because viewport is the hidden container of <html>;
IF a child want to use 100% of container's height, then you may need height: 1px to container if the container
doesn't have height property but a min-height. http://jsfiddle.net/aUDnn/1/?utm_source=website&utm_medium=embed&utm_campaign=aUDnn
3. > *:target {} // this might be a good way for animation.
4. What :nth-child(an+b) does is it divides the container’s children into a elements (the last group taking the remainder),
and then selects the bth element of each group. So, li:nth-child(3n+1) will divide the list items into 3 groups, put the
@Samjin
Samjin / Bugs and Fixes
Last active July 25, 2017 07:48
Experienced common CSS IE8 Bugs and Fix.
Inline-block
1. For inline-block for ie8 to work, <!DOCTYPE html> has to be declared, as well as <meta http-equiv="X-UA-Compatible" content="IE=edge">for correct rendering mode. Has to be first loading element in head.
2. inline-block may cause width problem. Use max-width: 100% or inherit to fix.
3. Try use *display: inline; *zoom:1; or float: left/right(works same as zoom), because ie8 treat inline-block as block element in cerntain condition. This supports ie6+
4. inline-block may stack or overlap on each other even they are in same line, to fix it use margin-right: 1px if possible, otherwise, use #3 tip above
5. Align to bottom: Inline or inline-block elements can be aligned to the bottom of block level elements if the line-height of the parent/block element is greater than that of the inline element.*
6. Using 'vertical-align: baseline' would stack inline-block element instead of align them.
Float and img width
.float > img, If img has max-width: 100% in IE8, it will be 0 width. image won't be seen.