【发布时间】：2012-01-04 12:29:40
【问题描述】：
我有一个布局，它包含一个输入 type="text"，后跟（在另一行）一个包含 img 的 a（链接）。我无法更改它，因为它是由另一个应用程序生成的，但我可以设置元素的样式。
编辑：一些伪html，适合那些无法阅读散文的人，还有一些额外的细节：
<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 完全一样，将图像放在输入下方。
编辑结束
我需要做的是完美地对齐文本输入和图像，并排（水平）。向左浮动不是一个选项，因为它会破坏接下来的元素，我也无法控制。
当尝试使用 inline-block 时，这是该问题的明显解决方案，我能够让它在最新版本的 Firefox 8 和 IE 9 上完美运行。但是，使用完全相同的样式，Chrome 呈现为inline 而不是 inline-block，这会破坏一切。
这是一个已知问题吗？有谁知道调整这种安排的方法？我相信我需要对 IE7 友好，所以顺便说一下，使用表格单元格显示也是不可能的。
编辑：
感谢 cmets，使用一些复杂的选择器组合，我设法在 a > img 之后选择 div 元素并添加 clear: both。这让我摆脱了内联块显示以支持向左浮动，只是发现它仍然在 chrome 中损坏（在其他浏览器中完美运行），这一次是因为 chrome 显然不允许为空/隐藏容器影响布局，明显违反标准。
我永远无法理解为什么会有喜欢 chrome 的开发人员，任何致力于设计复杂自动生成布局的人每天都必须遇到标准问题。我知道我知道。
总结尝试修复文本输入的垂直对齐和具有相同高度的img：
第一次尝试：在我的特定情况下（可能是由其中的嵌套容器引起的，但肯定是 Chrome 或 Webkit 错误）内联块被呈现为内联。
第二次尝试：使用块和向左浮动的东西导致在此之后的块被渲染在与此排列相同的行上。选择那个块是可能的，但即使很清楚：两者都把它放在它所属的排列之下，Chrome 或 Webkit 错误再次阻止了它的工作，因为它没有调整主容器的大小（溢出：隐藏）以包含所有块的大小，包括边距（适用于其他浏览器）。
第三次尝试：在容器上使用 min-height: 以模拟即使隐藏时也应由内部块的边距引起的高度偏移。 Chrome/Webkit 只是忽略了这一点。
最终解决方案使用（拐杖）：设置固定绝对高度：在主容器上。
【问题讨论】：
-
你能显示一些实际的代码，或者是错误的截图吗？
-
我们确实需要查看一些代码或您的错误示例。我们不能只猜测你在看什么。我认为你不能浮动的断言可能并不完全正确，你总是可以使用
clear代替浮动元素的元素，这将是最好的方法（除非有真正的理由不被能够漂浮）。我也不确定inline-block对 IE 的友好程度。我知道它在 IE6 中不起作用，但我不确定 IE7 -
使用 jsfiddle.net 向我们展示代码示例等，然后我们可以将其弄乱，看看最好的方法。
-
如果你浮动元素然后你设置类似 input[type="text"] + a + * { clear:both } 怎么办？
-
是的，或者，
input[type="text"] + a:after {clear:both}
标签： html css google-chrome webkit