内联块的另一个问题 [英] Yet another problem with inline-block

问题描述

大家好，


我对跨度和firefox有非常恼人的问题。我正在开发简单的表单设计器，用户可以拖放组件。 （如标签，文本框等）在表单上保存并供以后使用。看起来像这样：

http://www.dxlxb.com/vz/formdesigner.jpg


现在，我需要显示一个范围或者当用户放下控件时，表格单元格中的div。问题是div占用了一个单元格中的所有可用空间，所以我决定继续使用跨度。如果跨度内容未包含在单元格中，则一切正常。这里有一些例子：

http://www.dxlxb.com/vz/test.html

如你所见，选项2是我正在尝试的实现。有人可以告诉我如何在IE6 +和FF中创建看起来像选项2的span或div吗？


p.s.我已经尝试过使用div而不是spans - 据我所知我需要添加float：left强制div不占用所有可用空间，但是垂直对齐是非常错误的。


提前感谢。

解决方案

''inline-block''在Firefox中不起作用，所以你必须使用-moz版本。内联块''仅在内容实际上是''内联''时在IE中工作，例如< p>中的文本。我不认为< td>中的文字。符合条件。


< span>在所有浏览器中都能正常工作，这样就不会出现问题了。


确保使用严格的doctype进行测试，否则IE破碎的盒子模型可能会妨碍你。

正如我所说的那样 - 当包含文本时，span在FF中的工作并不是我想要的。请查看我的测试页面，看看我在说什么。

我想我现在明白了。你试图让红色轮廓环绕整个文本？如果是这样，您仍然可以使用< div>但是，由于这是文本，为什么不使用< p>？在这两种情况下，您只需设置边距，绝对位置并将其保持在< td>内的一个位置。同时为其他事情留出空间。

hello all,

i have very irritating problem with spans and firefox. I''m developing simple form designer, where user can drag and drop "components" (like labels, textboxes etc) on the form and save it for later use. it looks something like that:
http://www.dxlxb.com/vz/formdesigner.jpg

now, I need to display a span OR a div in a table cell when user drops a "control". the problem is that div takes all available space in a cell, so I''ve decided to go ahead with spans. everything works fine if span content is not wrapped in a cell. here are some examples:
http://www.dxlxb.com/vz/test.html
as you can see, option 2 is what I''m trying to achieve. could someone give me any idea how to create span or div which looks like option 2 in IE6+ and FF?

p.s. I''ve tried using divs instead of spans - as I understand I need to add float: left to force div not to take all available space, but then vertical alignment is very wrong.

thanks in advance.

解决方案

''inline-block'' doesn''t work in Firefox so you must use the -moz version. inline-block'' only works in IE when the contents are actually ''inline'' such as text in a <p>. I don''t think text in a <td> qualifies as such.

<span> works fine in all browsers so that won''t be the issue.

Make sure you are testing with a strict doctype otherwise IEs broken box model may get in your way.

as I said - span doesn''t work as I want in FF when text in it is wrapped. please review my testing page to see what I''m talking about.

I think I understand now. You are trying to get the red outlines to wrap around the whole text? If so, you can still use a <div> but, since this is text, why don''t you use a <p>? In both cases, you can just set margins, position absolute and to keep that to one spot inside the <td> while leaving room for the other things.

这篇关于内联块的另一个问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！