css常見問題

line-height: 1的意思
http://stackoverflow.com/questions/1000398/what-is-line-height1
number:
Sets a number that will be multiplied with the current font-size to set the distance between the lines
FFN-Rei: 因為上一層有 line-height: 16px;
FFN-Rei: 繼承下來 1 = 16px
老天尊: 1是inherit?
FFN-Rei: 是 1em
FFN-Rei: 如果你寫1.5em 就會是 16px * 1.5 = 24px


IE7- div有position: absolute;且裡面元素有float: left(right); ，該div寬度會為100%
http://stackoverflow.com/questions/2799334/ie-div-with-absolute-positioning-width-goes-to-100-of-screen-when-it-has-a-floa
解法：對IE7設固定寬度。
You absolutely have to set the width of an absolutely positioned element if it contains an element floated right to get it to behave properly.

查IE屬性支援程度
http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx#positioning

content和:after(:before)屬性 =>IE7 不支援
http://www.w3school.com.cn/css/pr_gen_content.asp
http://www.w3school.com.cn/cssref/selector_after.asp
.clearfix:after { content:'';clear:both;display:block; }
請改使用
.clear { clear: both; }
<div class="clear" ></div>
，而非在外框div下clearfix屬性

display屬性=> IE7不支援table-cell方法
IE6 IE7 只有預設是 display : inline 的元素才可以設定為 display : inline-block 。 => div不行
http://www.w3school.com.cn/css/pr_class_display.asp
所以，上下置中請用position+margin做

:last-of-type =>IE9+
http://www.w3school.com.cn/cssref/selector_last-of-type.asp

IE9圓角+漸層bug (ex. http://jsfiddle.net/jancbeck/CJPPW/31/ )
http://stackoverflow.com/questions/4692686/ie9-border-radius-and-background-gradient-bleeding
解法：

HTML:

<div class="mask roundedCorners">
    <div class="roundedCorners gradient">
        Content
    </div>
</div>

CSS:

.mask
{
    overflow: hidden;
}

.roundedCorners
{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.gradient
{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0065a4', endColorstr='#a0cf67',GradientType=0 ); /* IE6-9 */
}

在IE(7.8.9)中 top不吃%數=> 因為被display: table-cell影響到了
老天尊: 你上次說ie的table裡面不吃postion:absolute 是嗎?
Rei: 會吃 但是位置對不準

老天尊: ie7 img後面接div，中間會空白一點點... 看起來像img造成的高度
老天尊: 怎麼消除他
Rei: display: block
老天尊: 無效 = =
Rei: 在img 上面加
老天尊: 是的
Rei: 把中間的空白都拿掉
Rei: tag之間不要換行


IE9(未升10)對加载CSS数量及大小有限制
http://hi.baidu.com/teachmyself/item/832bddf597d032da521c2615
( 上限是32個 )
http://dancewithnet.com/2008/04/22/a-solution-of-limit-of-style-tags-in-ie/ (使用js去解)
雖然js解看起來可以，但實務上是不行的。當頁面一複雜的時候，仍會產生跑版問題。
解法二：整合各模板裡面的css。因為各模板獨立性高，整合後其他地方亦可能出現問題。而且此方法治標不治本，後面的人再創一個css 最後那個又沒效了。

結論：無解

表格格行換色
Alternate table row color using CSS?
http://stackoverflow.com/questions/3084261/alternate-table-row-color-using-css
CSS:
tr:nth-child(even) {
    background-color: #000000;
}
Note: No support in IE, even IE 8. =>使用jquery做

將float:left的 div置中(因為要自動設定div的寬度至最小寬度)
http://stackoverflow.com/questions/5523632/aligning-a-floatleft-div-to-center
使用 display:inline-block; 而不是float
(外層容器要設 text-align: center; )

調整FB Like box的寬度
http://fundesigner.net/fb-fluid-likebox/

.fb-comments, .fb-comments iframe[style] {width: 100% !important;}
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}

移除IE 11 input自帶的"X"按鈕
http://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs
那是個偽元素，在firefug中是觀察不到的
.someinput::-ms-clear {
    display: none;
}