我确信这很简单，但我正在尝试画一组小的、空的、inlineHTML 中的框如下所示：
<span style="border:1px solid black;height=10px;width=17px"></span>
早些时候，我们制作了简单的 .gif 图像，但随着浏览器显示的放大或缩小，图像看起来很模糊。
<span>然而，作为内联元素并不尊重height and width特性。当然还有使用<div style="display:inline;...表现出相同的行为，因为它不会尊重这些属性。
你能推荐一个CSS的方法吗？
Update
Assume the following, if I float it it will bond to the right or left of the text and I need it inlined to the text based upon the browser's width, &c
<p>Lorem ipsum dolor sit amet, <INSERT BOX HERE> consectetur adipisicing
elit, <INSERT OTHER BOX HERE> sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
height and width只能应用于具有有布局财产。默认情况下，SPAN 元素不实现此属性。
因为 inline-block 不能在所有主流浏览器上正常工作，所以我建议使用 padding-dimension 技巧：
<span style="font-size:30px; padding-left:30px; background:red;"> </span>
您可能需要稍微考虑一下维度，因为全局font-size, font-family and line-height会影响盒子的实际尺寸。
Edit:绘画空盒子是我错过的一点，但我认为无论如何从我的代码中这是很明显的。如果没有，这是另一个例子：
<style type="text/css">
.box1 { font-size:15px; font-family:Tahoma; padding-left:15px; border:1px solid red; overflow:hidden; }
.box2 { font-size:10px; font-family:Tahoma; padding-left:15px; border:1px solid green; overflow:hidden; }
.box3 { font-size:5px; font-family:Tahoma; padding-left:5px; border:1px solid blue; overflow:hidden; }
</style>
This is red box: <span class="box1"> </span> and this is green box: <span class="box2"> </span>.
And this is another box, this time it is blue: <span class="box3"> </span>.
此代码产生以下输出：替代文本 http://img413.imageshack.us/img413/5865/boxes.png http://img413.imageshack.us/img413/5865/boxes.png
因为我们把 在每个范围内，这个技巧都适用于所有浏览器。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
