使用 时的 HTML 样式问题和<子>子>
我注意到,当尝试按以下方式使用上标或下标时...
<ul>
<li><b>Mean Radius</b> 6,371.0 km</li>
<li><b>Mean Circumference</b> 40,041.47 km</li>
<li><b>Surface Area</b> 510,072,000 km<sup>2</sup></li>
<li><b>Volume</b> 1.0832073 × 10<sup>12</sup> km<sup>3</sup></li>
<li><b>Mass</b> 5.9736 × 10<sup>24</sup> kg</li>
<li><b>Mean Density</b> 5.5153 g/cm<sup>3</sup></li>
<li><b>Axial Tilt</b> 23.439281°</li>
</ul>
最终发生的情况是,整行的高度根据上标或下标文本进行调整,并且左侧粗体的文本垂直居中在这一行。这使得粗体文本看起来有点奇怪,因为它似乎稍微漂浮在行底部上方,并且没有与其他文本对齐。我尝试过在 CSS 中设置更大的行高,但这只会使效果更明显。垂直对齐似乎也没有做任何事情。所以我现在有点没有想法了。
有人知道如何将一行中的所有文本(无论行高、下标、上标等)打印在该行的底部吗?
PS - 我在 Chrome 6 和 Firefox 3.6.9 上查看过此问题,并且两者都会发生这种情况,因此我假设这是一个普遍问题,而不是浏览器问题。我还注意到,无论行高如何,文本似乎总是在一行中垂直居中,因此问题显然变成了,由于带上标的文本行比不带上标的文本行占用更多的“高度”,因此其居中不会与其他线路对齐。
I've noticed that when trying to use superscript or subscript in the following way...
<ul>
<li><b>Mean Radius</b> 6,371.0 km</li>
<li><b>Mean Circumference</b> 40,041.47 km</li>
<li><b>Surface Area</b> 510,072,000 km<sup>2</sup></li>
<li><b>Volume</b> 1.0832073 × 10<sup>12</sup> km<sup>3</sup></li>
<li><b>Mass</b> 5.9736 × 10<sup>24</sup> kg</li>
<li><b>Mean Density</b> 5.5153 g/cm<sup>3</sup></li>
<li><b>Axial Tilt</b> 23.439281°</li>
</ul>
What winds up happening is that the height of the entire line is adjusted for the superscripted or subscripted text and the text on the left in bold is vertically centered in this line. This makes the bolded text look a little weird since it seems like it's floating slightly above the bottom of the line and isn't aligned with the other text. I've tried making a larger line-height in CSS, but that only makes the effect more visable. Vertical-align also didn't seem to even do anything. So I'm kinda out of ideas now.
Would anyone know how to have all text in a line (regardless of line-height, subscript, superscript, etc) printed on the bottom of that line?
PS - I've viewed this on Chrome 6 and Firefox 3.6.9 and it happens in both, so I'm assuming this is a universal problem, not a browser problem. I've also noticed that text always seems to center itself vertically in a line regardless of line-height, so the problem apparently becomes that since a line of text with superscript takes up more 'height' than a line of text without, its centering wouldn't line up with the other line's.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
是的,这是一个普遍的问题;与排版的一般工作原理有关。
对此我们无能为力。但是通过边距和填充以及各种其他的东西,你也许能够消除这种效果。另一个(异常)肮脏的黑客是在每行上添加一些不可见的子/上标字符,使行交错,以使效果变得不那么明显。
还;
这一点没有意义:如果您希望它们位于行的底部,请不要将它们加上标!
替代方案:不要使用 sub/super;使用真实字符:10²⁴;这些可从 U+2070 向外购买;至 U+2094,以及 U+B2; U+B3,但根据字体,它们可能看起来相当奇怪。
替代扩展:如果您可以使用指数的计算机表示法(E+24 样式);有诸如 ㎢、㎨ 之类的单字符内容(分别为体积和平均重力加速度),这些复合材料从 U+3380 开始;但同样,他们可能看起来有点奇怪(或者根本不存在)。
Yes, this is a universal issue; related to how typography works in general.
There is little to be done for it; but with margins and paddings and all manner of other hoopy stuff you might be able to defeat the effect. Another (exceptionally) dirty hack is to add some invisible character sub/superscripted on each line, staggering the lines so that the effect becomes less visible.
Also;
That bit doesn't make sense: If you want them on the bottom of the line, don't superscript them!
Alternative: Don't use sub/super; use real characters: 10²⁴; these are available from U+2070 outwards; to U+2094, as well as U+B2; U+B3, but depending on the font they can look rather wonky.
Alternative Expanded: If you can get away with computer notation (E+24-style) for the exponents; there are single-character stuff for things like ㎢, ㎨, and the like (Volume and Average Gravitational Acceleration, respectively), these composites begin at U+3380; but again, they might look kind of wonky (or not be present at all).