僅將normalize.css應用於頁面上的組件？

我試圖使用CSS嚮導型component我發現：僅將normalize.css應用於頁面上的組件？

.wizard li { 
    background-color: #E4E4E4; 
    border-radius: 5px; 
    display: inline; 
    padding: 10px 30px 10px 40px; 
    margin-right: -7px; 
    width: auto; 
} 

.wizard li::before, .wizard li::after { 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    border-color: transparent; 
    border-left-color: #fff; 
    border-radius: 10px; 
} 

.wizard li::before { 
    border-width: 25px; 
    margin-top: -16px; 
    margin-left: 84px; 
} 


.wizard li::after { 
    border-left-color: #E4E4E4; 
    border-width: 21px; 
    margin-top: -12px; 
    margin-left: 24px; 
} 

.wizard li.selected { 
    background-color: #FF4F65; 
    color: #fff; 
} 

.wizard li.selected::after { 
    border-left-color: #FF4F65; 
} 

.wizard li:last-child::after { 
    border-left-color: transparent; 
}

我想用這個在不使用規範化/重置一個大工地。當你使用normalize.css時，組件似乎只能工作。有什麼辦法可以在這個組件上使用normalize.css，而不是整個頁面？

來源

2016-04-04 coding4fun

我可以推薦你選擇從復位代替'li'部分代替 – LGSon

是的，只需粘貼相關部分添加.wizard但是hmmmmmmmm正常化所有網站呢？如果佈局不變，那麼它不會受到傷害。如果它發生變化，那麼你的網站已經被破壞...... –

如果您檢查元素，則會看到font-family正在導致此問題。

From normalize.css：

html { 
    font-family: sans-serif; /* i'm causing it */ 
    -ms-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%; 
}

所以，簡單地增加一些font-family到.wizard li，像arial。

Check the codepen

或者，如果你使用的是自定義字體，那麼你需要修改的值（border-width，margin-top，margin-left）爲僞元素（.wizard li::before和.wizard li::after）。

來源

2016-04-04 12:37:34 Vucko

僅將normalize.css應用於頁面上的組件？

回答

相關問題