烦人的 ie7 & 6 样式问题答案

【问题标题】：annoying styling issue with ie7 & 6烦人的 ie7 & 6 样式问题
【发布时间】：2011-07-12 21:00:33
【问题描述】：

在以下页面上：

http://dreamdeals.rnmtest.co.uk/

右侧的登录框在 Firefox、ie8、safari、chrome 等中显示正常，但在 ie7 和 6 中内容溢出。我已经尝试了所有方法，例如为输入设置高度，但无法正确设置。有人有什么想法吗？

【问题讨论】：

溢出是什么意思？我在 IE7 中查看，它似乎与 IE8、Chrome 和 Firefox 显示相同。
我认为 IE7 没有问题。能否附上问题的截图？
可能是兼容模式下的ie7？
浮动输入元素可能会有所帮助

标签： css internet-explorer-7 internet-explorer-6

【解决方案1】：

在我的 IE8（7 兼容模式）中，它工作正常；但是尝试像这样修改你的身高：

#whyjoin {
    background-image: url(../images/whyjoinback.jpg);
    background-repeat: no-repeat;
    padding: 30px 5px 0 5px;
    height: 70px; /* BG Image (100px) = 70px + 30px (padding) */
    margin-top: -55px;
    position: relative;
}

我建议您将#cardclip 置于绝对位置，以免影响#rightcol。

【讨论】：

【解决方案2】：

我知道这个想法乍一看似乎和砍掉自己的手臂一样有意义，但是：

在#whyjoin input 上，而不是border: none，尝试使用border: 0。

这是您遇到的问题的参考：

http://bitesizebugs.wordpress.com/2009/08/17/border-none-not-working-on-text-input-in-internet-explorer/

因此，尽管border: 0 与border: none 相同，但最好使用0，因为它更短并且可以避免这个错误。

I should probably go post that here.

【讨论】：

我从来没有！有效！以前从没听说过那个，但我一定要记住它！谢谢