问题描述
查看此页
在Firebox中查看它，在Safari中查看它，在Opera中看一下它在Microsoft Internet中的
资源管理器。
唯一搞砸的案例是Firefox。
即，它不尊重处理时使用的字体
??宽度：80ex ??。
通过以下代码可视化测试：
< pre style =" border：thin black solid ;
宽度：30ex"> iiiiiiiiiiiiiiiiiiiiiiiiiiiiii< / pre>
参见：
Xah
a ??
Look at this page
http://xahlee.org/emacs/wrap-url.html
Look at it in Firebox, look at it in Safari, in Opera, and look at it
in Microsoft Internet Explorer.
The only fucked up case, is Firefox.
Namely, that it does not respect the font used when dealing with
??width:80ex??.
The way to test this visually, is by this code:
<pre style="border:thin black solid;
width:30ex">iiiiiiiiiiiiiiiiiiiiiiiiiiiiii</pre>
See also:
http://xahlee.org/UnixResource_dir/w...e_license.html
http://xahlee.org/UnixResource_dir/w..._attitude.html
Xah
xa*@xahlee.org
a?? http://xahlee.org/
推荐答案
它确实尊重字体。尝试使用几种字体 - 盒子的宽度
各不相同。
" ex"是字体_height_的度量。用于< preis的字体经常
类似Courier，其中x很短而且很胖。所以30 x高度
对于30''x'来说还不够宽。
另请注意，如果用户没有使用等宽字体< pre（他们
通常这样做，但不是必须）这样即使1ex是前者的
宽度也不会起作用。
您可以通过使用缩小到适合的方框来解决您的问题，方法是使它绝对定位，浮动或使用表格。显然
内容可能需要其他更改，如果这些有其他不必要的副作用。
It does respect the font. Try it with a few fonts-- the width of the box
varies.
"ex" is a measurement of font _height_. The font used for <preis often
something like Courier, in which the x is short and fat. So 30 x-heights
is not wide enough for 30 ''x''s.
Note also that if the user isn''t using a monospaced font for <pre(they
usually do, but don''t have to) this wouldn''t work even if 1ex were the
width of an ex.
You can fix your problem instead by using a shrink-to-fit box by making
it absolutely positioned, floated, or using a table. Obviously the
content may need other changes if these have other unwanted sideeffects.
它确实尊重字体。尝试使用几种字体 - 盒子的宽度
各不相同。
" ex"是字体_height_的度量。用于< preis的字体经常
类似Courier，其中x很短而且很胖。所以30 x高度
对于30''x'来说还不够宽。
另请注意，如果用户没有使用等宽字体< pre（他们
通常这样做，但不是必须）这样即使1ex是前者的
宽度也不会起作用。
您可以通过使用缩小到适合的方框来解决您的问题，方法是使它绝对定位，浮动或使用表格。显然
内容可能需要其他更改，如果这些内容有其他不必要的副作用。
It does respect the font. Try it with a few fonts-- the width of the box
varies.
"ex" is a measurement of font _height_. The font used for <preis often
something like Courier, in which the x is short and fat. So 30 x-heights
is not wide enough for 30 ''x''s.
Note also that if the user isn''t using a monospaced font for <pre(they
usually do, but don''t have to) this wouldn''t work even if 1ex were the
width of an ex.
You can fix your problem instead by using a shrink-to-fit box by making
it absolutely positioned, floated, or using a table. Obviously the
content may need other changes if these have other unwanted sideeffects.
我看了你的例子Firefox 1.0.7中的页面。如果它说'/ b $ b&b'Firefox Bug'，我测量了70ex盒子（用KDE屏幕标尺）和
使它宽490px。然后我测量了其中一个x字形
的高度，并将其调整为7px。 7x70 = 490，所以看起来正确。
但这取决于字体。如果您在不同的操作系统上使用Firefox，
甚至在不同的Linux发行版上，您可能没有完全相同的字体。 Safari和Opera可能没有使用与系统上相同的字体
Firefox。
某些字体可能会错误地报告x的高度。有些字体不是
即使有''x''（大多数语言都没有'x''）但是你
可以以单位为单位的大小仍然很大。
I looked at the example on your page in Firefox 1.0.7. Where it says
"Firefox Bug", I measured the 70ex box (with the KDE screen ruler) and
made it 490px wide. I then measured the height of one of the x glyphs
and made it 7px. 7x70 = 490, so that looks right.
But it depends on the font. If you''re using Firefox on a different OS,
or even on a different Linux distribution, you may not have exactly the
same font. Safari and Opera may not be using the same fonts as
Firefox on your system.
Some fonts may report the height of an ''x'' incorrectly. Some fonts don''t
even have an ''x'' (most languages after all don''t have an ''x'') but you
can still size things in ex units.
这看起来好像是个bug。
通过在你之前使用换行符来轻松解决问题
打开< span（或关闭它之后）。
That does look like it might be a bug.
Easily worked around though by putting the newline instead before you
open the <span(or after you close it).
您也可以尝试显示：table-cell。
You could also try display: table-cell.
Float可能是最简单的。
这种情况下的主要缺点是：绝对是需要的
定位框流出，所以下一个方块框在它后面而不是在它之下。
如果你给浮动一个自己的阻止盒子，并确保它在底部清除了
，它的行为应该与普通的阻止盒相同但是
缩小到合适的宽度。
这样的东西：
< div>
这是代码：
< / div>
< div>
< pre style =" float：left; background-color：贝壳;">
blah blah
blah
< / pre>
< span style =" clear：left">< / span>
< / div>
< div>
下一段文字
< / div>
Float is probably the easiest.
The main drawback in this case with position: absolute is that it takes
the positioned box "out of the flow", so the next block box goes
behind it instead of below it.
If you give the float its own block box, and make sure it''s cleared at
the bottom, it should behave identically to a normal block box but with
shrink-to-fit width.
Something like this:
<div>
Here is the code:
</div>
<div>
<pre style="float: left; background-color: seashell;">
blah blah
blah
</pre>
<span style="clear: left"></span>
</div>
<div>
Next bit of text
</div>
这篇关于Firefox浏览器问题：宽度：30ex不尊重字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！