1em是M的高度，而不是宽度。同样适用于ex，即x的高度。一般来说，这些是大写和小写字母的高度。
宽度是完全不同的问题。
将上面的示例更改为
<div> <span>1</span> 3 5 7 9 1 3 5 7 9 1</div>
您会注意到跨度的宽度和高度不同。在Chrome上，如果字体大小为20px，则跨度为12x22 px，其中20px是字体的高度，而2px是线高。
现在，由于em和ex在这里没有用，因此仅CSS解决方案的可能策略是
- 创建一个仅包含＆nbsp;的元素
- 让它自动调整大小
- 将div放在和
- 使它的大小是周围元素的10倍。
但是，我没有设法对此进行编码。我也怀疑这是否真的可能。
但是，可以在Javascript中实现相同的逻辑。我在这里使用无处不在的jQuery：
<html> <head> <style> body { font-size: 20px; font-family: Monospace; } </style> <script type="text/javascript" src ="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"> </script> </head> <body> <div>1 3 5 7 9 1 3 5 7 9 1</div> <script> $('body').append('<div id="testwidth"><span> </span></div>'); var w = $('#testwidth span').width(); $('#testwidth').remove(); $('div').css('width', (w * 10 + 1) + 'px');</script> </body></html>（w * 10 +1）中的+1用于处理舍入问题。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）