本帖最后由 dawsons 于 2013-07-23 09:18:34 编辑
下边的css文件是从网易邮件首页扒下来的。调用时在ie8 ,360(版本6.2)极速模式下都正常,如下图:
但切换到360的兼容模式下,input的div(如username,password处)显示错位,往右显示,而不是顶在左边。如下图:
而web文件如果后缀名为.htm却又正常,改为.asp还是显示错位。单位基本上都是用360浏览器,所以不得不调试这个兼容模式。请各位高手帮忙啊。
login.asp(注意不是.htm文件)
登陆 账号 帐号
密码 密码
验证码
登 录 重 置
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 行的尾部:例:
换成
如果页面没有任何服务器脚本代码最好用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{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{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;} 你们的前端写的这个css对吗
这个和什么动态网站 静态网站没什么关系 只是自己的代码的不严谨造成的