CSS の互換性の問題について教えてください。緊急です。！！ _html/css

CSS の互換性の問題について教えてください。緊急です。！！ _html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 09:45:08

オリジナル

1384 人が閲覧しました

本帖最后由 dawsons 于 2013-07-23 09:18:34 编辑

下边的css文件是从网易邮件首页扒下来的。调用时在IE8 ，360（版本6.2）极速模式下都正常，如下图：

但切换到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="cursor : pointer;" onclick="this.src='getcode.asp'"></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>

ログイン後にコピー

/* 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 行的尾部:例:

<%%>
换成
<%%>

如果页面没有任何服务器脚本代码最好用html

.loginFormIpt {}
里边添加left:0;试试。

KongHuLu：查看了，没什么不同。
jikeytang：加了，效果还是一样。

xiaofanku:必须是asp文件，因为要包含一些文件，并检测该用户是否未登陆或超时，如果是则显示登陆这一块，否则就进管理页面了。另外我把form去掉，效果还是一样的。

mail.163.com的页面在极速模式和兼容模式下都没问题，但代码太多，我研究不明白。
郁闷了。大家继续研究啊。

asp最终生成的代码也是html。效果应该跟html文件是一样的。仔细查看asp生成的html与纯html格式、标签等有什么差别

一个简单的测试方法
把你原先可用的htm文件直接重命名为asp然后再看是否一样。

“而WEB文件如果后缀名为.htm却又正常，改为.asp还是显示错位。”

我在问题中已经说过。
而且我是直接查看源文件，另存的.asp文件。

高手呢，郁闷。好大的论坛啊。

把 .loginFormIpt｛｝下的 margin-left:42px; 改成 left：42px;就可以了。。

margin应该是外边距，但为什么会对里面也产生了影响，原因我也在查找中。。等找到答案了在告诉你。。你可以先那样用着先。。

原因已经找到了：

IE67下，外面容器设置margin后，会被错误的继承到text, submit, button and textarea fields 所以解决方法是：1 、你可以把margin-left 改成 left

2、可以在外围多加一个 div：

            密码
            密码

86 行目 .loginFormTdIpt{幅:237px;パディング:7px 8px 6px 8px;border:1px 実線 #838383;ime-mode:disabled;height:20px;top:0;left:0px; font-size:16px;font-weight:700;background-color:#eef3f8;border:none;font-family:verdana; line-height:17px;color:#92a4bf;}

.loginFormTdIpt{width:237px;パディング:7px 8px 6px 8px;ボーダー:1px ソリッド #838383;ime-mode:無効;高さ:20px;上:0;左:0;フォントサイズ:16px; background-color:#eef3f8;border:none;font-family:verdana; line-height:17px;color:#92a4bf;} フロントエンドによって書かれたこの CSS は正しいですか?ウェブサイトまたは静的ウェブサイトそれは単に私自身のコードの不正確さが原因です