Skip to Content

HTML 標記 li 底下 span 指定文字格式的奇怪問題

有人發現一個 CSS 排版的問題,後來我發現,只要是這樣 

<ul><li><span class="abc">一堆文字....一堆文字....<a>一堆文字</a>....</span>

在 css 中指定 li 底下 span 的文字大小, 例如

.abc {font-size: 30px; }

而那一堆文字中若有一些標記,不只是 <a>, 我試過 <b> 甚至 <c>,標起來的文字都會上移,不過要夠長,捲到第二行之後才會看到。

底下是測試截圖,我加了下底線。

Chrome 和 Edge 都會如此,IE 則不會。

找了一些類似的資料,還不知真正的原因,但 css 這樣設定就可以解決

li span { display:block; }

結果截圖如下:

不過會不會有什麼副作用就不清楚了。

 

回應

發表新回應

這個欄位的內容會保密,不會公開顯示。
  • 自動將網址與電子郵件地址轉變為連結。
  • 自動斷行和分段。
  • 可使用的 HTML 標籤:<a> <address> <b> <blockquote> <br> <caption> <center> <cite> <code> <dd> <del> <div> <dl> <dt> <em> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <ins> <li> <ol> <p> <pre> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <th> <tr> <u> <ul>
    Allowed Style properties: background, background-attachment, background-color, background-image, background-position, background-repeat, border, border-bottom, border-bottom-color, border-bottom-style, border-bottom-width, border-collapse, border-color, border-left, border-left-color, border-left-style, border-left-width, border-right, border-right-color, border-right-style, border-right-width, border-spacing, border-style, border-top, border-top-color, border-top-style, border-top-width, border-width, bottom, caption-side, clip, color, direction, empty-cells, font, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, height, left, letter-spacing, line-height, list-style, list-style-image, list-style-position, list-style-type, margin, margin-bottom, margin-left, margin-right, margin-top, max-height, max-width, min-height, min-width, overflow, padding, padding-bottom, padding-left, padding-right, padding-top, right, table-layout, text-align, text-decoration, text-indent, text-transform, top, unicode-bidi, vertical-align, white-space, width, word-spacing, z-index

更多關於格式選項的資訊

CAPTCHA
驗證碼只有阿拉伯數字, 這是躲廣告用的, 麻煩你輸入了.
Image CAPTCHA
Enter the characters shown in the image.


story | about seo