这几天和本部一个兄弟夏先生合作完成华师大的亚运志愿者网站。由于说好我负责ASP部分,所以拿到本部发来的页面后只是顺手用360安全浏览器看了一下,毫无疑问,页面设计得很漂亮,这充分说明我们的分工是正确的——起码对于美工来说,夏先生比我好。
没有过多考虑,匆匆忙忙开始拷代码,花了一天多的时间,期间与本部进行了n次的交流,基本完成了页面功能。并上传到了服务器。心里还一个劲地感慨:合作的力量还真是强大啊。因为之前总是一个人做整个网站,基本上都得拖几个星期,就页面的设计已经能累死人了。现在有个人帮忙写css,效果的确不错。这充分说明,独行侠的年代已经过时了。当然,剩下的事可以说不是我的事了,我可不想无聊到做上传文章之类的事。
没想到的是昨晚同是亚运网络小组的梁兄突然说网站有问题,看了一下,原来用的是腾讯的TT浏览器。这才突然想起做完整个页面后都没有在各个浏览器上做过相关测试。事实上我的电脑上并没安装TT,这是个很大的漏洞,因为腾讯的爪牙现在几乎是伸遍了中国任何一台能上网的PC,TT浏览器使用量还是相当可观的,而我之前测试页面居然一直没有留意到真是吓了一跳。忙回来下了一个安装。事实证明,页面在TT上确实是存在问题的。有这么几个div的嵌套:
<div>
<div style="float:left;">框一</div>
<div style="float:left;">框二</div>
</div>
在IE8上,呈现出来的页面是理想的:框一在框二的左边。但在TT上,框二却掉到了框一的下面。原本以为又是浏览器不兼容的问题,决定用css hack解决。Google了一番,却发现到此都说TT使用的是IE的核心,因而只要页面在IE上显示正常,在TT上也应该是正常的,所以TT没有特定的css hack可写。这真是见鬼了,因为在我的电脑上,整个页面在IE(win7的IE版本是IE8)上是很正常的,照上面的理论,TT上也应该正常才是。怀着不服气的心理检查了半天的css,发现没有任何问题,情绪无比低落。就在准备投降的时候,突然灵感光顾,顺手打开了IETester,先用IE6试验,发现整个页面几乎都是变形的,面红耳赤地赶紧关掉,幸好这些问题可以用css hack解决,算不上问题,又顺手用IE7试验了一下,瞬时气不打一处来。这个页面在ie7下的bug和TT上的错误是完全一致的。这么说来,TT使用的内核应该是ie7的内核,而不是我系统上的ie8的内核,这到底是什么原因,有待了解。但既然是ie7的内核,问题就好解决多了,起码我可以使用ie7的css hack来处理,这比起无从下手要简单N倍了。
记得韩寒有句很经典的话:灵感就像公共汽车,不来的时候一部都没有,一来的时候几部一起来。此时我突然又想起应该在TT上查看一下页面的源代码,起码能知道asp输出的html是不是有问题的。检查之后,发现了一个很重要的线索:如上所述的两个div,放的都是用asp生成的一个标题列表,这些列表是用table包围起来的,如下:
<div class="pack">
<div style="float:left;" id="div1">
<table><tr><td style="width:100%">XX的标题</td></tr></table>
</div>
<div style="float:left;" id="div2">
<table><tr><td style="width:100%">XX的标题</td></tr></table>
</div>
</div>
问题出在width:100%上,重复检查了一下css,发现夏兄没给div1和div2定义width,而我写asp的时候,却给td输出了一个wdith=100%的属性,所以div1就把整个pack的width占据了,div2自然只好放到了下面。明白了道理,解决起来就简单得不得了了,只要给div1和div2加一个width的属性,问题解决。
这件小事说明了发散性的思维是很重要的,如果我一味地去检查CSS或试图发现TT的css hack,可能这个问题是搞不定了。
但说来说去,到底TT为什么会用ie7的内核而不是系统上的ie8的内核,哈哈,鬼知道。
补记:写这篇日志之后的若干星期,无意中在IE的“开发人员工具”里发现了一个浏览器模式设置,骇然有IE7可选,可见WIN7不仅有IE8内核,还有IE7的。CS兄又指教说:如果系统用的是IE8的话,那么无论什么傲游360TT搜狗之类的外壳浏览器统统都是用IE7模式渲染的,所以一般来说为了省事我都在正式发布页面时給meta加上一句强制让IE8也用IE7模式来渲染……这个方法真是个好办法,学习学习!!
这几天和本部一个兄弟夏先生合作完成华师大的亚运志愿者网站。由于说好我负责ASP部分,所以拿到本部发来的页面后只是顺手用360安全浏览器看了一下,毫无疑问,页面设计得很漂亮,这充分说明我们的分工是正确的——起码对于美工来说,夏先生比我好。
没有过多考虑,匆匆忙忙开始拷代码,花了一天多的时间,期间与本部进行了n次的交流,基本完成了页面功能。并上传到了服务器。心里还一个劲地感慨:合作的力量还真是强大啊。因为之前总是一个人做整个网站,基本上都得拖几个星期,就页面的设计已经能累死人了。现在有个人帮忙写css,效果的确不错。这充分说明,独行侠的年代已经过时了。当然,剩下的事可以说不是我的事了,我可不想无聊到做上传文章之类的事。
没想到的是昨晚同是亚运网络小组的梁兄突然说网站有问题,看了一下,原来用的是腾讯的TT浏览器。这才突然想起做完整个页面后都没有在各个浏览器上做过相关测试。事实上我的电脑上并没安装TT,这是个很大的漏洞,因为腾讯的爪牙现在几乎是伸遍了中国任何一台能上网的PC,TT浏览器使用量还是相当可观的,而我之前测试页面居然一直没有留意到真是吓了一跳。忙回来下了一个安装。事实证明,页面在TT上确实是存在问题的。有这么几个div的嵌套:
<div>
<div style="float:left;">框一</div>
<div style="float:left;">框二</div>
</div>
在IE8上,呈现出来的页面是理想的:框一在框二的左边。但在TT上,框二却掉到了框一的下面。原本以为又是浏览器不兼容的问题,决定用css hack解决。Google了一番,却发现到此都说TT使用的是IE的核心,因而只要页面在IE上显示正常,在TT上也应该是正常的,所以TT没有特定的css hack可写。这真是见鬼了,因为在我的电脑上,整个页面在IE(win7的IE版本是IE8)上是很正常的,照上面的理论,TT上也应该正常才是。怀着不服气的心理检查了半天的css,发现没有任何问题,情绪无比低落。就在准备投降的时候,突然灵感光顾,顺手打开了IETester,先用IE6试验,发现整个页面几乎都是变形的,面红耳赤地赶紧关掉,幸好这些问题可以用css hack解决,算不上问题,又顺手用IE7试验了一下,瞬时气不打一处来。这个页面在ie7下的bug和TT上的错误是完全一致的。这么说来,TT使用的内核应该是ie7的内核,而不是我系统上的ie8的内核,这到底是什么原因,有待了解。但既然是ie7的内核,问题就好解决多了,起码我可以使用ie7的css hack来处理,这比起无从下手要简单N倍了。
记得韩寒有句很经典的话:灵感就像公共汽车,不来的时候一部都没有,一来的时候几部一起来。此时我突然又想起应该在TT上查看一下页面的源代码,起码能知道asp输出的html是不是有问题的。检查之后,发现了一个很重要的线索:如上所述的两个div,放的都是用asp生成的一个标题列表,这些列表是用table包围起来的,如下:
<div class="pack">
<div style="float:left;" id="div1">
<table><tr><td style="width:100%">XX的标题</td></tr></table>
</div>
<div style="float:left;" id="div2">
<table><tr><td style=""width:100%"">XX的标题</td></tr></table>
</div>
</div>
问题出在width:100%上,重复检查了一下css,发现夏兄没给div1和div2定义width,而我写asp的时候,却给td输出了一个wdith=100%的属性,所以div1就把整个pack的width占据了,div2自然只好放到了下面。明白了道理,解决起来就简单得不得了了,只要给div1和div2加一个width的属性,问题解决。
这件小事说明了发散性的思维是很重要的,如果我一味地去检查CSS或试图发现TT的css hack,可能这个问题是搞不定了。
但说来说去,到底TT为什么会用ie7的内核而不是系统上的ie8的内核,哈哈,鬼知道。
补记:写这篇日志之后的若干星期,无意中在IE的“开发人员工具”里发现了一个浏览器模式设置,骇然有IE7可选,可见WIN7不仅有IE8内核,还有IE7的。CS兄又指教说:如果系统用的是IE8的话,那么无论什么傲游360TT搜狗之类的外壳浏览器统统都是用IE7模式渲染的,所以一般来说为了省事我都在正式发布页面时給meta加上一句强制让IE8也用IE7模式来渲染……这个方法真是个好办法,学习学习!!
为什么重复了两次?