IE下CSS/HTML ::对齐和按钮问题

Question

我在使用 IE 浏览时在此页面上有一个奇怪的错误 http://www.emfx.fr/?page_id=38

这张图片清楚地解释了问题： http://appartager.free.fr/site/bugIE.jpg

• 当我用 IE 看​​这个页面 localy(easyPHP) 时，一切正常
• 当我使用 IE 在线查看此页面时，我遇到了 2 个问题 1) 我的 hr 标签不对齐到中心 2) 按钮发送消息是裁剪

但代码完全相同和浏览器相同（IE）

hr 行为是 css 文件中的控制

hr.center {
    border: none;
    color: #353a40;
    background-color: #353a40;
    height: 1px;
    width: 371px;
    text-align: center;
}

按钮也由 2 个 css 文件控制（所有浏览器/IE 例外）

这里是通用代码：

#contact_form input[type=submit] {
padding: 7px 15px;
background: rgba(255,255,255,0.1);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font-family: "Droid Sans", Arial;
cursor: pointer;
border: 1px solid #666;
color: #ccc;
margin-bottom: 10px;
margin-left: 420px;
} 

这里是即例外

#contact_form input[type=submit] {
    padding: 8px 0px;
    background: rgba(255,255,255,0.1);
    margin-bottom: 300px;
    margin-left: 418px;
    text-align: center;
}

如果你们对如何解决这个问题有任何想法，那就太好了！

干杯！

问

Answer 1

您已从 IE 中的按钮中删除了水平填充

#contact_form input[type=submit] {
    padding: 8px 0px; /* 15px?*/

我个人会使用margin:auto 而不是使用text-align 将hr 居中 - 但hr 默认情况下与中心对齐；所以你不需要调整它。

（在 IE Web 开发人员工具中取出这些声明似乎可以解决问题）。