Tengs

Design & Develop

  • 言论自由
  • 技术文档
  • 日常琐事
  • 其它东西

bug

IE6 去除 input border

2011年8月10日 / 6 Comments

很多时候,我们不想要input默认的边框而自定义一些边框,甚至为了给input添加背景图片,需要去除掉input的边框。

这件工作在IE7+、firefox等高级浏览器上是很轻而易举,只需定义其 border:none; 即可。然而在IE6下这是不起作用的。这时候我们可以用比较滑头的做法,将border设置为白色,在白色背景下就把边框隐藏了。代码是 border:white; 为了表达我们对IE6的鄙视,对这个浏览器做特殊处理,也就是 css hack 一下,整个代码是:border:none;*border:white; 。现在好了,border 在 IE6 下的确不见了。

接下来我们不烦看点奇迹:border:none;*border:red; 。看到没,在白色背景下,并没有什么红色的border出现,这就是说,border真的是隐藏了,所以不管你的input背景要用什么颜色或图片,你需要做的是定义 border:none;*border:某个color;。在各种浏览器上就都能隐藏掉input的边框了。这就是 css hack,套句时髦的话,不管你信不信,反正我是信了。


分类: 技术文档 标签: bug, CSS

漏网之鱼——TT带来的痛苦挣扎

2010年9月11日 / 1 Comment

这几天和本部一个兄弟夏先生合作完成华师大的亚运志愿者网站。由于说好我负责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模式来渲染……这个方法真是个好办法,学习学习!!


分类: 技术文档 标签: bug, CSS, 腾讯TT

360安全浏览器不支持js弹出窗口某些属性探究

2010年8月4日 / 3 Comments

这阵子写一个asp.net的系统,想在GridView中插入一列超链接,并用JavaScript弹出一个窗口,查看GridView给出条目信息的相关详细。本来以为用个HyperLinkField,再简单不过,搞了很久,老是出错,Google了一番,才知道原来是因为.NET 2.0中不再支持 DataNavigateUrlFormatString=”JAVASCRIPT:……” 的写法,所以也就不能直接写JS了。解决方案是在后台代码页中添加RowDataBound事件:


protected void *_RowDataBound(object sender, GridViewRowEventArgs e) { 
    if (e.Row.RowType == DataControlRowType.DataRow) { 
        e.Row.Cells[*].Text = "<a href=""javascript:"" onclick=""javascript:var List = 
        window.open('*.aspx','查看','top=150,left=50,toolbar=no, menubar=no,scrollbars=yes, resizable=no, location=no, status=no, width=850,height=400');"">查看</a>""; 
    } 
}

写完后习惯性地F5运行了一下,由于我的PC上默认的浏览器是360安全浏览器,所以直接用的是360打开,点了一下“查看”的链接,发现确实是有打开一个新的页面,然而却不是预想中的网页小窗口的形式(定义中width=850,height=400),这里打开的是类似于target=””black””的一个新的浏览器窗口;郁闷不已,原本准备重新Google一番的,突然记起之前写css时候曾受360的千番折磨,遂抱着试试的态度顺手打开了Firefox,不料仅能顺利的弹出一个小窗口,又用了chore试验,成功。一时火气,真想把360浏览器卸了。分析了一下,除了得出这是内核的问题外似乎没有其他什么可能,遂在开始菜单中翻找出IE8,打开,不料也能正常弹出一个小窗口。很不服气,再试了一下搜狗浏览器,发现和360一样的异常。这到底是怎么一回事,貌似JavaScript函数window.open中定义的诸多属性比如width、menubar等等对其并未产生应有的效果。特意下载了一个opera,试了试,正常弹出窗口。又用IE-tester在IE6下试验,有问题。

考虑到在asp.net中测试到底是不怎么客观的,毕竟涉及到太多动态方面的内容,问题很可能来自我并不很熟悉的控件方面,索性动手写了一个html页面,如下:


<html>
<head>
<title></title>
<script LANGUAGE="JavaScript">
function openwin() {
window.open ("test.html", "newwindow", "height=100, width=400, toolbar=no, menubar=no,
scrollbars=no, resizable=no, location=no, status=no");
}
</script>
</head>
<body onload="openwin()">
</body>
</html>

试验在360中还是发现一样的问题。用搜狗浏览器却很神奇得打开了一个IE的弹出窗口(此时我正好运行着IE8)。Google+百度了一阵子,据说360用的的确是IE的内核,而搜狗确是一半ie一半Webkit引擎。

真是无比混乱。无奈中仔细研究了一下360浏览器的工具栏,发现有个管理功能组件的菜单,下面有个广告拦截扩展,点选项进去,弹出一个广告过滤设置的对话框,默认情况下“拦截弹出窗口”是选中状态,一时欣喜莫名,以为找到问题所在了,忙取消掉勾,重启了浏览器,又试了试,还是一样的问题,js并没有弹出一个窗口,而是在浏览器上打开了一个新窗口。莫名奇妙。到底是什么问题使JavaScript在360这样的IE内核加壳浏览器无中法实现预定义功能呢?360又是如何做到限制js的呢?

不得要领,遂决定花时间把这件怪事记录下来,等有精力再深入钻研。


分类: 技术文档 标签: bug, js

标签

315 360 ASP ASP.NET bug CentOS CSS CSS 3.0 CSS HACK Google Google图片搜索 Hadoop host文件 HTML5 ie6 IPV6 javascript JDK js osql photoshop php phpMyAdmin 中庸 主流 交易 人生 人类劣根 刷票 哲学 大学 感想 文学 文言文 期末 狂想 现代诗 琐事 科学 箴言 经济 网络安全 视频广告 诗歌 霸位

近期评论

  • 壮敏发表在《讨贼檄文》
  • 黄祺发表在《顿悟》
  • 西班牙超模发表在《致加西亚》
  • 西班牙超模发表在《致加西亚》
  • 糗事百科发表在《IE6 去除 input border》

Copyright © 2023 Tengs.

WordPress Theme by themehall.com

粤ICP备12053888号