Question

我在右侧的搜索有一个名为Go的按钮，它在除IE8之外的所有现代浏览器的正确位置（在IE7和IE6中它是一个噩梦，但我不关心那些浏览器）。我尝试了一些东西，但按钮不会在IE8中出现，有人可以告诉我为什么会这样这是一张显示我的意思的图片 http://content.screencast.com/users/cryoffalcon/folders/Jing/media/92fc0c87-44ac-4c7a-9af5-d8d5824ef85d/go%20button.png

以下是演示页http://bloghutsbeta.blogspot.com/2012/03/testing-3.html 如果你不想寻找CSS 这是css：

.formbox {
background:#434445;
border-top-color:#0f0f0f;
border-top-style:solid;
border-top-width:3px;
border-left-color:#0f0f0f;
border-left-style:solid;
border-left-width:3px;
border-right-color:#797d7d;
border-right-style:solid;
border-right-width:3px;
border-bottom-color:#797d7d;
border-bottom-style:solid;
border-bottom-width:3px;
-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
color:#787D7D;
font:13px Verdana,Geneva,sans-serif;
margin: 3px 0 5px 5px;
padding:1px;
}
.formbutton {
margin:0 5px 5px 0;
color:#B6E85E;
text-shadow: 0 0 4px #7F241C, 0 0 4px #7F241C,
        0 0 4px #7F241C;
cursor:pointer;
}

Answer 1

如果你在html头中创建一个条件语句来包装你的新样式表，这很容易解决，例如

<!--[if IE 8]><link rel="stylesheet" href="Css/ie.css" /><![endif]-->

并将以下CSS放入样式表中，这应解决问题。

input.formbutton.buttonbloghuts.buttongradient {
position: relative;
top: 8px;
}

您已经有了一个条件语句来创建HTML5元素。

任何问题，我都乐意提供帮助。

Answer 2

从.formbox和.formbutton移除顶部和底部边距，并将它们都设置为vertical-align: top;，在很大程度上排除了IE8中的问题。如果您需要围绕它们的垂直空间，可以在父padding上移动使用form（并使其成为display: block;）。

（使用conditional classes可以更轻松地针对特定于IE的修复程序进行定位）

Answer 3

如果你能提供一个有用的按钮代码的jsfiddle。 IE开发工具不和我合作。如果我的记忆服务，尝试在两个输入字段上添加浮动，看看会发生什么。

看一下这个网站和搜索：它真的很相似，但还有一个额外的div来做有弹性的东西：http://www.genesismedicalimaging.com

IE8中的按钮布局问题

3 个答案: