首页新闻找找看学习计划

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

0
悬赏园豆: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/

请大家帮忙。

zdd的主页 zdd | 初学一级 | 园豆:51
提问于:2014-09-30 10:14
< >
分享
最佳答案
1

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

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

多谢啊。等你写。

zdd | 园豆: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

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

zdd | 园豆: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>
zdd | 园豆:51 (初学一级) | 2014-09-30 11:11

@zdd: 总宽度问题

808改小点

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

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

zdd | 园豆: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

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

zdd | 园豆:51 (初学一级) | 2014-09-30 11:41

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

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

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

zdd | 园豆:51 (初学一级) | 2014-10-15 11:07
其他回答(6)
0

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

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

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

ff和chrome上的结果。

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

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

 

支持(0) 反对(0) zdd | 园豆:51 (初学一级) | 2014-09-30 10:46

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

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

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

支持(0) 反对(0) zdd | 园豆:51 (初学一级) | 2014-09-30 11:13
0

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

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

什么问题,也是错位么?

支持(0) 反对(0) zdd | 园豆:51 (初学一级) | 2014-09-30 10:36

@zdd: 恩

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

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

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

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

支持(0) 反对(0) zdd | 园豆:51 (初学一级) | 2014-09-30 10:58

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

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

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

支持(0) 反对(0) zdd | 园豆:51 (初学一级) | 2014-09-30 11:14
1

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

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

同楼上。不过还是谢谢。

支持(0) 反对(0) zdd | 园豆:51 (初学一级) | 2014-09-30 10:59

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

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

我把你的代码增加了一个属性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>
风沙渡 | 园豆:224 (菜鸟二级) | 2014-09-30 12:08
0

<!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
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册