IE678解決僞類不兼容問題

時間 2019-11-13

標籤 ie678 解決不兼容問題简体版

原文原文鏈接

如下內容參考自segmentfaultcss

要解決ie678的兼容性問題，通常最好少用css3和html5獨有的屬性，或者作css hacker。last-child通常用於清除浮動、批量添加標籤、標籤之間的分隔符、去掉list item最後一個的border-right等等。html

用after清除浮動的時候，通常會加個ie獨有屬性zoom:1來處理兼容性問題。html5

.clearfix::after {
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
    content: "";
}
.clearfix {
    clear: both;
    zoom:1;
}

而須要用它批量添加標籤時，則能夠使用jquery來代替，添加的標籤較少時能夠手動添加取代。jquery

去掉list item最後一個的border-right能夠用負邊距：css3

負值之美：負值在頁面佈局中的應用segmentfault

CSS佈局奇淫巧計之-強大的負邊距app

還有一種方法是使用css2選擇器element+element，即一個元素緊接着另外一個元素選擇器。使用佈局

li+li{border-top: 1px dotted #999;}

這樣作到在以下每條記錄上加上分隔符，作到不產生最後一個border-right的結果spa

<ul>
    <li>sample text</li>
    <li>sample text</li>
    <li>sample text</li>
    <li>sample text</li>
    <li>sample text</li>
    <li>sample text</li>
</ul>

若是是非table佈局合併邊框就直接在邊框設定margin -1px便可,使用.net

margin-right: -1px;
margin-bottom: -1px;

合併重複的邊框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .item {
            float: left;
            border: 1px solid red;
            margin-right: -1px;
            margin-bottom: -1px;
            width: 158px;
            height: 180px;;
        }

        .wrapper {
            width: 400px;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="item">

    </div>
    <div class="item">

    </div>
    <div class="item">

    </div>
</div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。