IE8中的按钮布局问题

问题描述：

我的搜索在右侧有一个名为Go的按钮，它在除IE8之外的所有现代浏览器中都处于正确位置（在IE7和IE6中这是一场噩梦，但我不在乎这些浏览器）。我尝试了一些东西，但按钮不来它在IE8的地方有人可以告诉我，为什么会这样这里是要表明我的意思 http://content.screencast.com/users/cryoffalcon/folders/Jing/media/92fc0c87-44ac-4c7a-9af5-d8d5824ef85d/go%20button.png IE8中的按钮布局问题

这里是演示页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; 
}

答

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

（使用conditional classes使得它更容易瞄准IE特有的修复这样的）

谢谢我用你的方法对味道进行了微小的改变 – CryOfFaclon 2012-04-26 19:08:34

答

如果你能提供的按钮的代码，这将有助于一个的jsfiddle。 IE开发工具不会与我合作。如果我的记忆服务，请尝试在两个输入字段中添加左边的浮动，看看会发生什么。

看看这个网站，并在搜索：这真的类似于这样做，但有一个额外的div做有弹性的东西：http://www.genesismedicalimaging.com

我在阿富汗5KBPS速度不要指望我用的jsfiddle：P – CryOfFaclon 2012-04-26 13:41:25

是的jsfiddle真的带宽密集型？ – 2012-04-26 14:07:57

yes jsfiddle对我来说是一个噩梦：P – CryOfFaclon 2012-04-26 19:08:59

答

，如果你在你的HTML头包住你的新创造条件语句这很容易固定如

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

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

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

你已经有一个条件语句在你的头上来创建HTML5元素。

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

我也喜欢你的方法，它也和另一个一样有用，我只是选择了其中一种方法，没有任何困难的感觉，非常感谢你的帮助，我真的很感激。 – CryOfFaclon 2012-04-26 19:09:46

完全没问题。乐于帮助。 – frontendzzzguy 2012-04-27 08:29:39

IE8中的按钮布局问题

相关推荐