为什么下划线断断续续的

<!DOCTYPE html>

<html>

<head>

div{color: red;

line-height: 2em;

text-indent: 2em;

}

span{

font-weight: bold;

color: green;

word-spacing: 0.5em;

text-decoration: underline;

}

</style>

</head>

<body>

<div>

HTML是超文本标记语言，是 <span> HyperText Markup Language</span>的缩写，超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准

它通过标记符号来标记要显示的网页中的各个部分。

</div>

</body>

</html>

http://img1.sycdn.imooc.com//climg/5aa49bd50001455112420055.jpg

丶四夕 2018-03-11

源自：CSS文本样式 3-14 编程练习

收起

2回答

zywzyw 回答被采纳获得+3积分 2018-03-11 19:15:50

1	`你的span 里面少一句 text-transform: uppercase；你没有转化成全部大写，所以下划线是默认基线的位置。而像 p g 这样的字母，基线是穿过去的，所以看起来断断续续。`

收起回答

丶四夕提问者 #1

谢谢你，但如果我就要小写呢，下划线位置可以改变吗

2018-03-11 19:27:53
zywzyw 回复提问者丶四夕 #2

只是首字母大写时（text-transform:capitalize；）不同的浏览器显示不同。微软Microsoft Edge 浏览器这时候下划线不会出现不连续的现象。你这种情况应该属于Chrome浏览器。

2018-03-11 22:20:34
丶四夕提问者回复 zywzyw #3

哇大神就是厉害啊一看就晓得我用的什么浏览器感谢感谢！

2018-03-11 22:33:28

zywzyw 2018-03-11 19:12:43

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文本样式</title>
        <style type="text/css">
           /*补充代码*/
          .a{color: red;line-height: 200%;text-indent: 2em;}
          .a span{font-weight: bold;color: green;text-transform: uppercase;word-spacing: 0.5em;text-decoration: underline;}         </style>
    </head>
    <body>
          <div class="a">
                HTML是超文本标记语言，是 <span> HyperText Markup Language</span>的缩写，超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准
                它通过标记符号来标记要显示的网页中的各个部分。
          </div>
    </body>
</html>