Maison >interface Web >tutoriel HTML >请教下CSS兼容问题，急！！！_html/css_WEB-ITnose
请教下CSS兼容问题，急！！！_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-21 09:45:081391parcourir
下边的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 行的尾部:例:
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：网站问题_html/css_WEB-ITnoseArticle suivant：开心油条首页右侧滚动在IE6下兼容性问题_html/css_WEB-ITnose