Question

我有一个布局，其中包含一个输入类型=“text”，后面是（在另一行上）一个包含img的（链接）。我不能改变它，因为它是由另一个应用程序生成的，但我可以设置元素的样式。

编辑：对于那些无法阅读散文并且还有一些额外细节的人来说，有些伪文字：

<td class="a"><!-- parent container-->
  <input type="text" class="b"><!-- always here -->
  <a class="c"><!-- sometimes here, sometimes not-->
    <img>
  </a>
  <div></div><!-- sometimes has content, sometimes doesn't -->
</td>

发生了什么：如果我尝试使用内联块，并且在没有边距，填充或定位的情况下，所有非webkit浏览器都会在输入上方平均偏移图像的顶部，从而允许我使用相对来修复垂直对齐定位。另一方面，Chrome的呈现方式就像我使用了display：inline而不是inline-block，将图像放在输入下方。

END OF EDIT

我需要做的是将文本输入和图像完美地并排（水平）对齐。浮动到左边不是一个选项，因为它打破了接下来的元素，我无法控制它。

当尝试使用内联块时，这是这个问题的明显解决方案，我能够在最新版本的Firefox 8和IE 9上完美运行。但是，使用完全相同的样式，Chrome呈现为内联而不是内联块，它会破坏一切。

这是一个已知问题吗？有没有人知道如何调整这种安排？我相信我需要对IE7友好，所以使用表格单元格显示也是不可能的。顺便说一下。

修改

感谢您的评论，使用了一些复杂的选择器组合，我设法在a＆gt;之后选择了div元素。 img并添加清楚：两者。这让我摆脱了内联块显示，有利于浮动到左边，只是发现它仍然在chrome中打破（在其他浏览器中完美运行），这次因为chrome显然不允许空/隐藏容器影响布局，明显违反标准。

我永远不会理解为什么有喜欢chrome的开发人员，任何从事样式复杂自动生成布局的人都必须每天遇到标准问题。我知道我这样做。

TO SUMMARIZE 尝试将文本输入和img的垂直对齐方式修复为相同的高度：

第一次尝试：在我的特定情况下（可能是由嵌套容器引起的，但它肯定是Chrome或Webkit错误）内联块呈现为内联。

第二次尝试：在左边使用块和浮动的东西导致此后的块在与此排列相同的行上呈现。选择那个块是可能的，但即使清楚：两者都把它放在它所属的排列之下，Chrome或Webkit bug再一次阻止了这个工作，没有调整主容器的大小（overflow：hidden）来包含所有块的大小，包括边距（适用于其他浏览器）。

第三次尝试：在容器上使用min-height：以模拟应该由内部块的边缘引起的高度偏移，即使在隐藏时也是如此。 Chrome / Webkit完全忽略了这一点。

最终解决方案使用（拐杖）：在主容器上设置固定的绝对高度：

Answer 1

内联块元素依赖于空白区域，因此删除元素之间的所有空格就足够了 - 结果应该如下所示：

<td class="a">
    <input type="text" class="b"><a class="c"><img>
    </a><div>
    </div>
</td>

Answer 2

如果可能，只需设置输入和输出的宽度;宽度：50％;并浮动它们或者添加css3 img：在{content：''; clear：both;}之后使用clear：both？

但在这些情况下我会使用javascript＆amp; jquery玩这些元素，＆amp;我无法在Chrome上关闭javascript，所以你在各种情况下都会很好！

Chrome（webkit？）是否会错误地呈现内联块？如何对齐此布局？

2 个答案: