CSS-IE6,7 兼容的问题

WP主题讨论 WP主题讨论 主题:1013 回复:2239

CSS-IE6,7 兼容的问题

浮生未歇 发布于 2017-06-26 字数 441 浏览 1018 回复 1

基本样式 手机 + 输入框 +按钮 排在一行
在FF 谷歌 360 IE8,9 下显示正常,在一行,而在IE6,7按钮就换到下一行行在右边,请问怎么让它兼容
先上代码

<div class="mobile">
<p>手机<a href="javascript:;" id="getphonecode" action="/sendcode" >发送验证码</a>
<input id="mobile" style="padding:0 5px;" type="text" class="txt" /></p></div>

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(1

晚风撩人 2017-09-13 1 楼

造成IE6和IE7换行的问题是由于"手机"两个字造成的,IE6和IE7把它看成是一行,所以就换行了。

所以给你改了一下,能够在一行了

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<style>
.mobile{margin-top:10px;}
.mobile input{border:0px;background:url(../images/w.png) -497px -369px no-repeat;width:134px;height:31px;margin-left:10px;}
.mobile p span{ float:left;} <!--新加的-->
.mobile p a{display:block;background:url(../images/w.png) -11px -322px no-repeat;width:73px;height:29px;text-align:center;color:#fff;float:right;padding-top:5px;margin-right:16px;white-space:nowrap;}
</style>
</head>

<body>
<div class="mobile">
<p><span>手机</span><a href="javascript:;" id="getphonecode" action="/sendcode" >发送验证码</a>
<input id="mobile" style="padding:0 5px;" type="text" class="txt" /></p></div>
</body>
</html>