Question

此http://supportforstepdads.com/grtstepdadland/页面未在浏览器FIrefox和IE7中正确显示某些元素。其中一些是：

名称字段
电子邮件字段
“免费获取电子书”按钮

在这里粘贴样式表：

* {
    margin: 0;
    padding: 0;
}

body {
    background: #000 url("../img/bg.png") no-repeat 520px 0px;
    margin-left:auto;
    margin-right:auto;
    font-family: Arial, sans-serif;
    font-size:14px;
    line-height:1.6em;
    color:#fff;
}

#container {
    width:500px;
    margin:auto;
    margin-top:150px;
}

#logo {
    float: right;
    margin-top: -130px;
}

#ebookimg {
    margin-left:146px;
}

/*Typography*/
p {
    margin-bottom:15px;
}
h2 {
    color: #4AAFD9;
    font-size:34px;
    line-height:2.5em;
}

h3 {
    font-size:26px;
}

h4 {
    color: #4AAFD9;
    font-size:22px;
    line-height:2.2em;
}


/*Form and its elements*/
form {
    margin-top:20px;
}

input[type=text]{
    font-size:18px;
    color:#fff;
    text-align:center;
    font-style:oblique;
    background: #222;
    border: 1px solid #4AAFD9;
    line-height:1.5em;
}

form #spamcheck {
    margin-top:20px;
    margin-bottom: 40px;
    color: #888;
    font-size:14px;
}

input[type=submit]
{
    padding:20px 40px;
    background: #4AAFD9;
    font-size:20px;
    font-weight:bold;
    border:none;
    cursor:pointer;
}

/*Social Icons area*/
#social p {
    color: #4AAFD9;
    text-align:center;
    margin-top:45px;
}

#socialicons {
    margin-left:106px;
}

#socialicons img {
    padding:2px;
    width:41px;
}

#socialicons img:hover {
    opacity: 0.9;
}


/*Features Area*/

#features {
    padding: 20px 10px;
    margin:auto;
}

.featurep {
    padding:15px 14px 14px 66px;
    background-image:url("../img/qmark.png");
    background-color:#222;
    background-repeat:no-repeat;
    margin-bottom:13px;
    border-radius:25px;
    font-size: 16px;
}

#ebookfeatures {
    margin-top:40px;
}

#ebookfeatures p {
    text-align:justify;
}

/*Footer*/
#footerh4 {
    float:left;
}

#footer h4 {
    font-weight:normal;
}

#buttonbuy {
    float:right;
    width:170px;
    text-align:center;
    padding:15px 30px;
    background: #4AAFD9;
    font-size:14px;
    font-weight:bold;
    border:none;
    cursor:pointer;
}

#copyright {
    margin-top:120px;
    text-align:center;
}

#copyright span {
    color: #4AAFD9;
}

我如何解决这些问题？

谢谢！

Answer 1

它看起来就像它是因为你已经通过align="center"上的<form>标记将这些元素置于中心位置，如果你将其移除并将text-align: center;添加到form {样式（CSS）然后它应该正确显示给你（在FF上测试，在Mac上，所以不能测试IE7抱歉）

顺便说一句，我假设您正在Chrome中进行测试，实际上显示的是错误的，FF＆amp; IE7将正确显示它。不推荐使用align标记以支持CSS。 Deprecated tags

NBSP

Answer 2

将以下样式添加到“表单及其元素”部分：

form {
    text-align:center;
}
form input {
    display:inline-block;
    *display:inline;
    *zoom:1;
}

页面在Mozilla Firefox和IE 7中无法正常显示

2 个答案: