Home >Web Front-end >HTML Tutorial >请教下CSS兼容问题，急！！！_html/css_WEB-ITnose
请教下CSS兼容问题，急！！！_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:45:081392browse
下边的css文件是从网易邮件首页扒下来的。调用时在IE8 ，360（版本6.2）极速模式下都正常，如下图：
但切换到360的兼容模式下，input的DIV（如username,password处）显示错位，往右显示，而不是顶在左边。如下图：
而WEB文件如果后缀名为.htm却又正常，改为.asp还是显示错位。单位基本上都是用360浏览器，所以不得不调试这个兼容模式。请各位高手帮忙啊。
login.asp（注意不是.htm文件）
login.css
但切换到360的兼容模式下，input的DIV（如username,password处）显示错位，往右显示，而不是顶在左边。如下图：
而WEB文件如果后缀名为.htm却又正常，改为.asp还是显示错位。单位基本上都是用360浏览器，所以不得不调试这个兼容模式。请各位高手帮忙啊。
login.asp（注意不是.htm文件）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Language" content="zh-cn"><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>登陆</title><link rel="stylesheet" href="login.css" type="text/css"></head><body><div class="main" id="mainBg"><div class="main-inner" id="mainCnt" style="background-position: 50% 0%; background-repeat: no-repeat no-repeat;"><div class="login"><div class="loginForm"> <form id="login" name="login" action="index.asp?action=chklogin" method="post"> <div id="idInputLine" class="loginFormIpt"> <input class="loginFormTdIpt" tabindex="1" title="请输入帐号" id="idInput" name="username" type="text" maxlength="50" value="username" style="width:145px;" autocomplete="on"> <span class="loginFormIntro">账号</span> <label for="idInput" class="placeholder" id="idPlaceholder">帐号</label> </div> <div class="outLine"> </div> <div id="pwdInputLine" class="loginFormIpt"> <input class="loginFormTdIpt" tabindex="2" title="请输入密码" id="pwdInput" name="password" type="password" style="width:145px;"> <span class="loginFormIntro">密码</span> <label for="pwdInput" class="placeholder" id="pwdPlaceholder">密码</label> </div> <div class="outLine"> </div> <div id="pwdInputLine" class="loginFormIpt"> <input class="loginFormTdIpt" tabindex="3" title="请输入验证码" id="pwdInput" name="verifycode" type="text" style="width:145px;"> <span class="loginFormIntro"><img src="getcode.asp" style="max-width:90%" onclick="this.src='getcode.asp'" alt="请教下CSS兼容问题，急！！！_html/css_WEB-ITnose" ></span> <label for="pwdInput" class="placeholder" id="pwdPlaceholder">验证码</label> </div> <div class="loginFormIpt loginFormIptWiotTh"> <button id="loginBtn" class="btn btn-login" tabindex="4" type="submit">登 录</button> <button id="loginBtn" class="btn btn-reset" tabindex="5" type="reset">重 置</button> </div> </form> <div class="ext" id="loginExt"> </div> </div></div></div></div></body></html>
login.css
/* main */.main { height:440px; margin:0 auto; background:#eee; z-index:1;}.main-inner { width:900px; height:440px; overflow:visible; margin:0 auto; position:relative; clear:both}.login { width:338px; height:388px; float:right; margin-right:-150px; margin-top:24px; background:#fff; border:1px solid #b7c2c9; _display:inline; text-align:left; position:relative; z-index:2; border-radius:2px;}/* blocker */.blocker { height:65px; margin:0 auto; background:#f7f7f7; border-top:1px solid #fff;}/* form */.loginForm { position:relative; height:307px; padding-top:32px; z-index:3;}.loginFormIpt { position:relative; height:33px; line-height:33px; margin-top:0px; margin-left:42px; clear:both; width:253px; border:1px solid #bac5d4; border-bottom-color:#d5dbe2; border-right-color:#d5dbe2; border-radius:2px; z-index:4;}.loginFormIpt-over { border-color:#a6b4c9; border-bottom-color:#bac5d4; border-right-color:#bac5d4;}.loginFormIpt-focus .loginFormTdIpt, .loginFormIpt-over .loginFormTdIpt { background-position:0 -160px;}.loginFormIpt-focus { border-color:#60a4e8; border-bottom-color:#84b4fc; border-right-color:#84b4fc;}.loginFormIpt-focus .placeholder { color:#b4c0d2;}.loginFormIptWiotTh { height:35px; border:none; margin-top:19px; width:255px;}.loginFormTh { width:36px;}.loginFormThMob { display:none;}.loginFormTdIpt{width:237px;padding:7px 8px 6px 8px;border:1px solid #838383;ime-mode:disabled;height:20px;top:0;left:0;line-height:20px;font-size:16px;font-weight:700;background-color:#eef3f8;border:none;font-family:verdana;line-height:17px;color:#92a4bf;}.loginFormTdIpt:focus { outline:0;}.loginFormTdIpt-focus { color:#333; font-weight:700;}.loginFormIntro { font-weight:700; color:#b7c2c9;}.showPlaceholder .placeholder { visibility:visible; cursor:text;}.placeholder { color:#92a4bf; font-size:14px; text-indent:10px; position:absolute; left:0; top:0; visibility:hidden; background:none;}.outLine { height:18px; line-height:18px; margin-left:42px; clear:both; width:253px; text-align:right; margin-top:8px;}.btn { float:left; height:35px; text-align:center; cursor:pointer; border:0; padding:0; font-weight:700; font-size:14px; display:inline-block; vertical-align:baseline; line-height:35px; outline:0; background-image:url(images/bg_v5.png)}.btn-login { width:102px; background-position:-112px -208px; color:#555; float:left;}.btn-login:hover { color:#555}.btn-login-hover { background-position:-112px -256px; color:#555}.btn-login-active { background-position:-112px -304px; color:#555}.btn-reset { width:102px; background-position:-112px -208px; color:#555; float:right;}.btn-reset:hover { color:#555}.btn-reset-hover { background-position:-112px -256px; color:#555}.btn-reset-active { background-position:-112px -304px; color:#555}/* ext */.ext { width:336px; border:1px solid #f1f3f5; height:62px; background-position:0 -448px; background-repeat:repeat-x; position:absolute; bottom:0;} 回复讨论(解决方案)
360的兼容模式应该是IE7
改了后缀名就不一样这不应该啊，可以查看一下源代码看.htm下和.asp下有什么不同？
前面的空白应该 是asp脚本造成的。可以把脚本移到html 行的尾部:例:
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：网站问题_html/css_WEB-ITnoseNext article：开心油条首页右侧滚动在IE6下兼容性问题_html/css_WEB-ITnose