"回来。"/>
中国领先的IT技术网站
|
|

解析谷歌同样但不同结果的代码

看不出问题的时候要仔细看开发工具的每行,不只是出问题的那行,之前调试程序错误的时候就经常是因为;或者是"<"去了没">"回来。

作者:sh7ning来源:sh7ning的博客|2012-04-20 15:52

开发者大赛路演 | 12月16日,技术创新,北京不见不散


先看一段代码

  1. > 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>课后作业管理系统title> 
  6. <style> 
  7. @charset "utf-8";  
  8. * {  
  9.     margin:0px;  
  10.     padding:0px;  
  11. }  
  12. .ipt {  
  13. width: 228px;  
  14. height: 38px;  
  15. line-height: 38px;  
  16. border: 1px solid #84A4C1;  
  17. padding: 0 9px;  
  18. margin-right: 10px;  
  19. }  
  20.  
  21.  
  22. style> 
  23. head> 
  24. <body> 
  25.         <form class="index_form"> 
  26.         <input type="text" class="ipt"/> 
  27.         <input type="password" class="ipt"/> 
  28.          form> 
  29. body> 
  30. html> 

再看一段代码

  1. > 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>课后作业管理系统title> 
  6. <style> 
  7. @charset "utf-8";  
  8. * {  
  9.     margin:0px;  
  10.     padding:0px;  
  11. }  
  12. .ipt {  
  13. width: 228px;  
  14. height: 38px;  
  15. line-height: 38px;  
  16. border: 1px solid #84A4C1;  
  17. padding: 0 9px;  
  18. margin-right: 10px;  
  19. }  
  20.  
  21.  
  22. style> 
  23. head> 
  24. <body> 
  25.         <form class="index_form"> 
  26.         <input type="text" class="ipt"/> 
  27.         <input type="password" class="ipt"/> 
  28.          form> 
  29. body> 
  30. html> 

他们初一看是一样的代码,执行在ie上面效果也相同,但是到了chrome浏览器上面结果却不同了,
效果如下:

第一段代码结果

第二段代码结果

仔细看盒子模型里面的内容是不是不同,一个是228,一个是208,但是我们前面代码里面分明都是用的width: 228px;height: 38px;为什么第二段代码不是呢,然后我仔细看了下开发人员工具styles的具体内容,比较了两则执行的不同,

发现不正常的那个多了一段话:

user agent stylesheet

input:not([type="image"]), textarea {
box-sizing: border-box;
}

然后我比较了两段代码,在记事本里面,在editPlus里面不好看,在记事本以下就看清了,原来是第一行里面分别是

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">和

DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

不知道大家看出来了么?

里面引号的状态不同,一个是英文下面的,一个是中文下面的,看来中英文害死人啊,

现在再回到开发人员工具

其实第一行就有问题了

只是先前一直觉得有问题但是没仔细去看,

正确的是:

错误的是

也就是中文那个没正常执行。

综上:有时候不能正常显示,但看不出问题的时候要仔细看开发工具的每行,不只是出问题的那行,之前调试程序错误的时候就经常是因为;或者是"<"去了没">"回来。细节害死人啊,编程要养成良好的习惯,否则容易犯书写上的问题。

原文地址:http://www.cnblogs.com/sh7ning/archive/2012/04/09/2438393.html

【编辑推荐】

  1. 10个最佳的网站分析方法
  2. 简洁风格按钮及其CSS 3实现方法
  3. CSS必须要知道的10个技巧
  4. HTML 5成就的经典游戏(附代码)
  5. 10个基于Web的HTML5音乐播放器
【责任编辑:张伟 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

Expert C# 2005 Business Objects中文版

本书描述了怎样应用面向对象的概念来进行.NET应用程序的架构、设计和开发。作者将重点放在了面向业务的对象,即业务对象和怎样在包括Web和...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊