2012-11-05 98 views
2

我有两个开发人员看着这个,他们一直无法找出是什么原因造成的问题。令人沮丧的CSS浮动问题

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

我相信这个问题是CSS相关的,但也请注意我在WordPress中使用一个主题,并整合了MailChimp订阅表单。

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

预先感谢您 - 阿什利

Site Reference

+0

您是否尝试将#mc_signup DIV的宽度设置为更高的值?当我将它设置为530px时,表单仅显示在一行上。 – Makkes

+0

嗨丹尼斯,就这么你知道 - 它也在Opera中做同样的显示 - 也不要忽略Opera。所以你想要什么样的最终结果?订阅按钮应该放在哪里? – 2012-11-05 22:17:13

+0

我已经投票结束这个问题,因为它太本地化了,不可能帮助任何未来的访问者。最好的问题有一个小型自包含的示例,其中包含足够的代码来演示问题,没有任何额外的问题。将此代码发布到问题中。这样做可能需要很多工作,但它是解决问题的关键部分。 – KatieK

回答

0

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

或者你可以改变#subscribe .wrapper .centerwidth: 100%; text-align: center;display: inline-block;

更换.leftcopy#mc_signup彩车我建议,如果你想有一个更具体的答案编辑你的问题。请添加屏幕截图。

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

0

你说的问题在于Opera和Chrome。 但我从input#mc_signup_submit.button删除padding: 0px 10px;部分,这很好。

1

请注意,我不是CSS专业人士。

我正在使用Firefox 16.0.2查看您的网站,我看到了您描述的相同问题。

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

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

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

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

+0

请注意,我建议您下载Firefox的Firebug附加组件,它可以让您深入了解您的页面CSS,并让您在浏览器中使用CSS规则。 –

+1

这个答案是正确的方向,但因为这个特定的声明深埋在一个WordPress主题中,我认为这个建议应该是用'#mc_signup {width:auto!important; }' – joequincy