css 输入框和搜索按钮在IE浏览器上无法对齐

悬赏园豆：10 [已解决问题] 解决于 2014-09-30 11:30

我想做一个类似百度首页的搜索框，做好之后在不同浏览器下测试，发现firefox和chrome都能正确显示，但是IE9上显示不正确。

firefox和chrome上的显示效果如下：

IE9上的显示效果如下：可以看到输入框和搜索按钮有一个明显的错位。

我用的css格式如下

input.maininput /*输入框*/
{
    width: 30%;
    height: 40;
    border-style: solid;
    border-color: #3E9CBF;
    border-width: 2px;
    font-size: 20px;
}

input#searchbutton /*搜索按钮*/
{
    position:relative;
    top:2px;
    left:-6px;
    width:10%;
    height:40;
    border-style:solid;
    border-color:#3E9CBF;
    border-width:2px;
    cursor:pointer;

    /*style the text*/
    font-size:1.5em;
    color:#FFFFFF;
    letter-spacing:.1em;
    background-color: #3E9CBF;
}

网页在这里：http://shufazidian.sinaapp.com/

请大家帮忙。

html/css基础 css

翰墨小生 | 初学一级 | 园豆：51
提问于：2014-09-30 10:14

< >

最佳答案

你这样好麻烦啊！稍等一下，我写一个简单的啊

收获园豆：5

风中xyz | 菜鸟二级 |园豆：211 | 2014-09-30 10:26

多谢啊。等你写。

翰墨小生 | 园豆：51 (初学一级) | 2014-09-30 10:35

@zdd:

IE：

火狐：

谷歌浏览器：

兼容性没问题，代码是：

<style type="text/css">
#inputInfoId /*输入框*/
{
    width: 600px;
    height: 40px;
    line-height:40px;
    border-style: solid;
    border-color: #3E9CBF;
    border-width: 2px;
    font-size: 20px;
    float: left;
}

#searchbutton /*搜索按钮*/
{
    width:200px;
    height:40px;
    line-height:40px;
    border-style:solid;
    border-color:#3E9CBF;
    border-width:2px;
    cursor:pointer;
    
    font-size:1.5em;
    color:#FFFFFF;
    letter-spacing:.1em;
    background-color: #3E9CBF;
    
    float: right;
    text-align: center;
}
</style>

<div style="margin: 0 auto;width: 808px;">
    <div id="inputInfoId">
    </div>
    <div id="searchbutton">
    搜索
    </div>
</div>
<div style="clear: both;"></div>

风中xyz | 园豆：211 (菜鸟二级) | 2014-09-30 10:49

调整一下你需要的width就可以了

<div style="clear: both;"></div> 这个的意思是，消除浮动，之后的html代码不会受到之前的float的影响了。

风中xyz | 园豆：211 (菜鸟二级) | 2014-09-30 10:51

@安赫丽达: 非常感谢啊，我试试。

翰墨小生 | 园豆：51 (初学一级) | 2014-09-30 11:00

@安赫丽达: 我试了一下，输入框和搜索按钮之间还是有一个小的空隙。如下（抱歉啊，新手，问题很多）

我的html如下，我不想改动原来的结果，所以就把你的代码加进去了，不知道是不是这个原因引起的。

<body>
        <form class="mainform" onsubmit="return false;">
            <div style="margin:0 auto; width:808px;">
                <input class ="maininput" id="myhanzi" type="text" name="hanzi" />
                <input id="searchbutton" type="button" value="搜索" />
            </div>
            <div style="clear:both;"></div>
            <div id="pic"></div>
        </form>
    </body>

翰墨小生 | 园豆：51 (初学一级) | 2014-09-30 11:11

@zdd: 总宽度问题

808改小点

志在必得Shaun | 园豆：10 (初学一级) | 2014-09-30 11:14

@志在必得Shaun: 多谢啊，改成800，好了。

翰墨小生 | 园豆：51 (初学一级) | 2014-09-30 11:29

@zdd:

<style type="text/css">
#inputInfoId /*输入框*/
{
    width: 600px;
    height: 40px;
    line-height:40px;
    border-style: solid;
    border-color: #3E9CBF;
    border-width: 2px;
    font-size: 20px;
    float: left;
}

#searchbutton /*搜索按钮*/
{
    width:200px;
    height:42px;
    line-height:42px;
    border-style:solid;
    border-color:#3E9CBF;
    border-width:2px;
    cursor:pointer;
    
    font-size:1.5em;
    color:#FFFFFF;
    letter-spacing:.1em;
    background-color: #3E9CBF;
    
    float: right;
    text-align: center;
    margin-top: -46px;
}
</style>



<div style="margin: 0 auto;width: 808px;">
    <input id="inputInfoId"/>
    <div id="searchbutton">搜索</div>
</div>
<div style="clear: both;"></div>

你给这个searchbutton 加一个onclick事件，用这个div代替button

风中xyz | 园豆：211 (菜鸟二级) | 2014-09-30 11:32

@安赫丽达: 好的，现在已经能用了，这个方法留着备用。多谢你啊。

翰墨小生 | 园豆：51 (初学一级) | 2014-09-30 11:41

@zdd: sinaapp.com/ 这个里面的mysql如何使用呢，方便加QQ吗？想请教您几个问题，我的是 583630762

风中xyz | 园豆：211 (菜鸟二级) | 2014-09-30 15:42

@安赫丽达: 刚看到，晚上加你。

翰墨小生 | 园豆：51 (初学一级) | 2014-10-15 11:07

其他回答(6)

开头加一句<!doctype html>试试

undefined | 园豆：898 (小虾三级) | 2014-09-30 10:26

非常感谢，试了一下，IE9上还是错位，而且输入框高度变小了。成这个样子了。

ff和chrome上的结果。

IE9上的结果，还是有一点错位的。

高度没关系，可以调整，但是错位还是不知道如何处理。

支持(0) 反对(0) 翰墨小生 | 园豆：51 (初学一级) | 2014-09-30 10:46

@zdd: 学会用浏览器F12带出的工具看CSS，现在的版本按钮高度设置一下就可以了。

支持(0) 反对(0) 志在必得Shaun | 园豆：10 (初学一级) | 2014-09-30 10:54

@志在必得Shaun: 感谢，我一定努力。

支持(0) 反对(0) 翰墨小生 | 园豆：51 (初学一级) | 2014-09-30 11:13

我的火狐打开你的网站。也是有问题

vanteking | 园豆：8 (初学一级) | 2014-09-30 10:32

什么问题，也是错位么？

支持(0) 反对(0) 翰墨小生 | 园豆：51 (初学一级) | 2014-09-30 10:36

@zdd: 恩

支持(0) 反对(0) vanteking | 园豆：8 (初学一级) | 2014-09-30 10:42

F12用工具看CSS，搜索按钮的top设置成0问题解决

收获园豆：5

志在必得Shaun | 园豆：10 (初学一级) | 2014-09-30 10:40

谢谢，不过，那样的话火狐和chrome就有问题了。要所有浏览器都一样的结果才行。

支持(0) 反对(0) 翰墨小生 | 园豆：51 (初学一级) | 2014-09-30 10:58

@zdd: 你的浏览器可能不是最新版。

支持(0) 反对(0) 志在必得Shaun | 园豆：10 (初学一级) | 2014-09-30 11:01

@志在必得Shaun: 检查了一下，火狐和chrome都是最新的。

支持(0) 反对(0) 翰墨小生 | 园豆：51 (初学一级) | 2014-09-30 11:14

input#searchbutton /*搜索按钮*/ 中 top：2px; 去掉

ysll | 园豆：194 (初学一级) | 2014-09-30 10:48

同楼上。不过还是谢谢。

支持(0) 反对(0) 翰墨小生 | 园豆：51 (初学一级) | 2014-09-30 10:59

@zdd: input#searchbutton 中加上 top:2px; top:0px !improtant; 解决所有IE兼容的方法

支持(0) 反对(0) ysll | 园豆：194 (初学一级) | 2014-09-30 11:17

我把你的代码增加了一个属性vertical-align:bottom,,还有就是把两个input框放在同一行中书写，我在这边chrome、FF、IE都可以对齐了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>    
    <style>
    input.maininput 
    {
        width: 30%;
        height: 30px;
        border:2px solid #3E9CBF;
        font-size: 20px;
       
        vertical-align:bottom;                 /*！！兼容两个input框对其*/
    }

    input#searchbutton 
    {
        position:relative;
        top:0px;
        left:-6px;
        width:10%;
        height:36px;
        border-style:solid;
        border-color:#3E9CBF;
        border-width:2px;
        cursor:pointer;

        /*style the text*/
        font-size:1.5em;
        color:#FFFFFF;
        letter-spacing:.1em;
        background-color: #3E9CBF;

        vertical-align:bottom;                     /*！！兼容两个input框对其*/

    }

    input#searchbutton:hover, input#searchbutton:focus 
    {
        color:#dfe7ea;
    }
    </style>
</head>
<body>
    <form onsubmit="return false;" class="mainform">
        <input type="text" name="hanzi" id="myhanzi" class="maininput"><input type="button"  value="搜索" id="searchbutton"><!--换行写，chrome下input框之间会有空隙-->
        <div id="pic"></div>
    </form>
</body>
</html>

进击的totoro | 园豆：224 (菜鸟二级) | 2014-09-30 12:08

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
html body {border: 0px;margin: 0px;padding: 0px;}
.search_div {width: 229px;height: 27px;float: left;}
.search_input {width: 193px;height: 27px;float: left;}
.search_btn {width: 36px;height:27px;float: left;}
.search_input_text {width: 193px; /*解决IE6宽度莫名奇妙撑出总宽度问题*/* width: 191px; /*解决IE 6 7 向下偏移1像素问题处理*/*margin-top: -1px;height: 27px;line-height: 27px;background-image: url(img/list_search.jpg);background-repeat: no-repeat;color: #000;border: 0px;}
.search_input_btn {width: 36px;height: 27px;background-image: url(img/list_search_btn.jpg);background-repeat: no-repeat;border: 0px;}
</style>
</head>
<body>
<div class="search_div">
<div class="search_input">
<input class="search_input_text" type="text" id="search_input_text" />
</div>
<div class="search_btn">
<input class="search_input_btn" type="button" id="search_input_btn" />
</div>
</div>
</body>
</html>

指尖上的青春 | 园豆：202 (菜鸟二级) | 2015-10-27 14:36

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

css 输入框和搜索按钮在IE浏览器上无法对齐

欢迎，请先登录或者注册。