令人沮丧的CSS浮动问题

Question

我有两个开发人员看这个，他们无法弄清楚导致问题的原因。

在以下网站上，订阅栏（页面顶部）看起来很好，并且在Chrome，Safari和Firefox中正常运行，但在IE中出现问题，即将“订阅”按钮向下移动并与“资源”重叠导航项目。必须为浮动设置一个特定的宽度才能正常工作，但是当你将宽度设置为auto时，它会浮动在它左边的元素下面。虽然它仍然以这种方式正常运行，但它有问题，因为它看起来很糟糕。

我认为这个问题与CSS有关，但请注意我在WordPress中使用主题并集成了MailChimp订阅表单。

对建议的任何想法都将不胜感激。

提前谢谢 - Ashleigh

Site Reference

Answer 1

请注意，我也不是CSS专家。

我正在使用Firefox 16.0.2查看您的网站，我看到您正在描述的问题。

使用Firebug，我相信您应该从width: 430px中删除<div id="mc_signup">。当前宽度对于完整表单而言太小，我认为这是订阅按钮移动到表单其余部分之下的原因。 （它只是包装，因为没有足够的水平空间）

查看屏幕截图，蓝色区域为<div id="mc_signup">，限制为430px。

screenshot http://img841.imageshack.us/img841/1540/denised.png

我希望这能回答你的问题。

Answer 2

我在Chrome下遇到问题。将#mc_signup的宽度增加到440px;可以解决您的问题。

或者，您可以将#subscribe .wrapper .center更改为width: 100%; text-align: center;，并将.leftcopy和#mc_signup上的浮点数替换为display: inline-block;

如果您想要更具体的答案，我建议您编辑您的问题。请添加截图。

我强烈建议您查看以下关于如何正确浮动元素的链接。 www.quirksmode.org/css/clearing.html

Answer 3

您描述的问题还包括Opera和Chrome。 但我从padding: 0px 10px;删除了input#mc_signup_submit.button部分，这很好。