在使用 CSS 樣式時，經常會出現樣式不生效的情況，其中一種常見的問題就是水平線或下劃線出現但樣式不生效。

這種情況常見于使用 text-decoration 屬性進行下劃線設置時，CSS 樣式不會對其生效。

/* 下劃線設置 */
.underline {
text-decoration: underline;
}
/* 實際渲染時不出現下劃線 */
<p class="underline">Hello World</p>

造成這種情況的原因是用戶代理樣式表中對下劃線的默認樣式設置。可以通過在樣式表中設置 text-decoration 屬性的 initial 值，來清除用戶代理樣式。另外，也可以通過將下劃線屬性設置為 none，再重新設置想要的下劃線樣式解決。

/* 清除用戶代理樣式 */
.underline {
text-decoration: underline;
text-decoration-color: initial;
text-decoration-style: initial;
text-decoration-line: initial;
}
/* 重新設置下劃線屬性 */
.my-underline {
text-decoration: underline;
text-decoration-color: red;
text-decoration-style: dashed;
text-decoration-line: underline;
}
<p class="my-underline">Hello World</p>

總結起來，當我們遇到下劃線或水平線樣式不生效的情況時，需要先考慮是否存在用戶代理樣式的影響。此時可以清除用戶代理樣式或重新定義樣式屬性，重新設置想要的樣式效果。