每日兩道前端面試題20190331

xcold 發(fā)布于2019-08-30 15:43 / 1899人閱讀

摘要：如何利用和正負(fù)相消實(shí)現(xiàn)多列等高目前我用過最好的就是這個(gè)方法了，瀏覽器兼容性最好最簡(jiǎn)便。

CSS如何利用padding和margin正負(fù)相消實(shí)現(xiàn)多列等高？

目前我用過最好的就是這個(gè)方法了，瀏覽器兼容性最好最簡(jiǎn)便。
首先把列的padding-bottom設(shè)為一個(gè)足夠大的值，再把列的margin-bottom設(shè)一個(gè)與前面的padding-bottom的正值相抵消的負(fù)值，父容器設(shè)置超出隱藏，這樣子父容器的高度就還是它里面的列沒有設(shè)定padding-bottom時(shí)的高度，當(dāng)它里面的任一列高度增加了，則父容器的高度就會(huì)被撐到它里面最高那列的高度，其他比這列矮的列則會(huì)用它們的padding-bottom來補(bǔ)償這一部分的高度差，因?yàn)楸尘笆强梢杂胮adding占用空間里的，而且邊框是會(huì)跟隨padding變化的。

沒有正負(fù)相消時(shí)，出來的樣式是這樣的：



    
        我是left
        我是right
        

        

        現(xiàn)在我的高度比left高，所以出現(xiàn)了脫節(jié)現(xiàn)象

效果如下：

若使用等高布局：



    
        我是left
        我是right
        

        

        現(xiàn)在我的高度比left高，所以出現(xiàn)了脫節(jié)現(xiàn)象

使用了等高布局，效果如下：

經(jīng)常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧？

1.png24的圖片在IE6上會(huì)出現(xiàn)背景
解決方案是做成png8.

2.瀏覽器默認(rèn)的margin和padding不同
解決方案：加一個(gè)全局的*{margin:0;padding:0;}來統(tǒng)一.

3.IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在IE6設(shè)置下的margin會(huì)比較大
例如：以下代碼在IE6就會(huì)在產(chǎn)生雙倍距離

#box{
    float:left;
    width:10px;
    margin:0 0 0 10px;
}

這種情況下在IE中會(huì)產(chǎn)生雙倍的距離，解決方案是在有float的標(biāo)簽中樣式控制加入_display:inline,將其轉(zhuǎn)換為行內(nèi)屬性（_這個(gè)符號(hào)只有在IE6下會(huì)識(shí)別）
其他的識(shí)別規(guī)則：

.bb{
    background-color:red;
    background-color:#00deff9;/*IE6、7、8識(shí)別*/
    +background-color:#a200ff;/*IE6、7識(shí)別*/
      _background-color:#1e0bd1;/*IE6識(shí)別*/
}

4.IE下，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性
在firefox中只可以使用getAttribute()來獲得自定義屬性
所以獲得自定義屬性一律使用getAttribute().

5.IE下，event會(huì)有x,y屬性，但是沒有pageX和pageY屬性，對(duì)于firebox有pageX和pageY熟悉，但是沒有x,y屬性

6.chrome中文界面下默認(rèn)會(huì)將小于12px的文本強(qiáng)制按照12px顯示
解決方案：css屬性中-webkit-text-size-adjust:none;解決.

7.超鏈接訪問后hover樣式不出現(xiàn)
解決方案：被點(diǎn)擊訪問過的超鏈接樣式不再具有hover和active，這時(shí)候要注意CSS順序即可解決：
L-V-H-A a:link{} a:visited{} a:hover{} a:active{}
參考鏈接