CSS样式中,不同浏览器元素位置偏移现象(ie11)

CSS 写出的样式里面，Input出来的样式在IE11上面和Opera41 里面表现得不是很一致；

input用line-heigh居中定位的话，因为高度设成了50PX; 所以line-heigh也是设的50PX，但是不知道为什么

input在OPERA41上面会出现向下偏移的现像，而邻近元素<span>居中却很正确？而在IE中比较正常

谢谢指教

CSS样式如下

@charset "utf-8";
html,body{margin:0;padding:0;}
header
{
    height: 50px;
    background:url(images/header.png) no-repeat left ;
    background-position: 35px;
    background-color: #228ABF;
    background-size: 28px 28px;
}
header div
{
    float: right;
    margin-right: 80px;
    color: #fff;
    line-height: 50px;
}
header div input
{
    border-radius: 15px;
    border-style: none;
    width: 300px;
    height: 25px;
    margin-right: 30px;
}
header div  span
{
    float: right;
    background: url(images/login.png) no-repeat left;
    width: 50px;
    font-size: 15px;
    text-align: right;
    display: block;
}

html代码

<body>
    <header>

        <div>
            <input type="text"></input>
            <span>登陆</span>
        </div>
    </header>

偏移图

ie11

Opera 41

九日谈

浏览 4088回答 1

1回答

一瞬儿光

有些元素存在浏览器兼容问题，可以试试vertical-align:middle这个

0 0

随时随地看视频慕课网APP