编程学习

标题就是<title>拉萨尔–莱佛士教育</title>,调试了很久发现当把<title>拉萨尔–莱佛士教育</title>
删掉后,显示了.
….
找原因,没找到.
后来有吧中间de”–”去掉,显示正常.
然后再加上显示”–”显示正常.
在把备份de文件<title>段复制过来,又没显示了.
好像是”–”de问题,不知道”–”是不是戏弄我.

虽然庆幸de是Firefox3中解决了这个bug,但Firefox3还在beta阶段,取代Firefox2还是需要一些时间de,下面就来仔细说一下这个问题:
一、样式为{position:absolute;}de容器中de表单输入框在样式为类似{overflow:auto;}de容器区域中失去光标
可以通过例一到例六来了解最常见de情况.
如果想整个body都出现失去光标,可以设置html和body两个容器,请看示例.包括举例deoverflow:auto在内能引起该Bugdeoverflow属性共有:
overflow:auto
overflow-x:auto;
overflow-y:auto;
overflow:scroll;
overflow-x:scroll;
overflow-y:scroll;
overflow-x:hidden;
overflow-y:hidden;
除了避免使用overflow属性de其他解决方案:
利用overflow:hidden代替产生bugdeoveflow属性
在具有上述overflow属性de容器中加入position:relative,请看实例.
在positon:absolutede容器上加入同样deoveflow属性,同时注意在页面出现de顺序,见例四
为使用能产生bugdeoveflow属性de容器选择合适de标签,比如fieldset,见例六.
二、样式为{position:absolute;}de容器中de表单输入框在iframe容器区域中失去光标
可以通过例七来了解这个情况.IE6中为了解决下拉列表级别过高问题,往往需要用iframe来遮盖它,偶尔疏忽忘记做浏览器限定就有可能导致上面de问题.
现在看来Firefox2对iframede处理bug还真不少,比如以前就发现了Firefox返回时Iframede显示Bug.

我要建立一个测试用HTML文件,以下是关键de相关代码片断
[复制此相关代码]CODE:
<div>
<pre><code>
<a href=”http://creativecommons.org/licenses/by-nc-sa/2.5/cn/” rel=”license”>遵守我de版权</a>
<a href=”http://creativecommons.org/licenses/by-nc-sa/2.5/cn/” rel=”license”>遵守我de版权</a>
<a href=”http://creativecommons.org/licenses/by-nc-sa/2.5/cn/” rel=”license”>遵守我de版权</a>
<a href=”http://creativecommons.org/licenses/by-nc-sa/2.5/cn/” rel=”license”>遵守我de版权</a>
<a href=”http://creativecommons.org/licenses/by-nc-sa/2.5/cn/” rel=”license”>遵守我de版权</a>
</code></pre>
</div>
在以上相关代码中我将应用以下CSS
[复制此相关代码]CODE:
div{
width: 60%;
}
pre{
overflow : auto ;
background-color : #fff0f5 ;
margin : 1.6em 0 ;
padding : 0 1.6em ;
}

以上相关代码在Firefox中de显示是可以预料de.
但是在IE6中,没有任何 overflow 效果能够显示出来

图1 IE6下de效果

而在IE7中de显示也有些不同,多了一个惹人讨厌de右侧滚动条

图2 IE7下de效果

IE6debug可以通过给containing block添加widthde方法解决,即
[复制此相关代码]CODE:
pre{
overflow : auto ;
background-color : #fff0f5 ;
margin : 1.6em 0 ;
padding : 0 1.6em ;
width : 90% ;
}

此时,IE6de滚动条出来了,但是它与IE7表现de一样,多了一个右侧滚动条.
多一个右侧滚动条de原因在于:IE总是将底部滚动条添加在元素de总高度de内部,这样使得元素de一部分高度被底部滚动条占据,不能完全显示,所以IE就自动添加了右侧滚动条使得元素被挡住de内容也能够滚动后看到 .
最后为了去除IE右侧de滚动条,我给containing block添加以下CSS
[复制此相关代码]CODE:
pre{
overflow : auto ;
background-color : #fff0f5 ;
margin : 1.6em 0 ;
padding : 0 1.6em ;
width : 90% ;
overflow-y : hidden ;
}

这样我就在IE中创造出了和Firefox、Opera和Safari同样de overflow : auto 效果.
在实际应用中,这一效果可以应用于所有固定格式de元素(通常为 pre 元素),最常见de是相关代码块.

如果 <img>标签de src为一个 gif 动画,那么他de onload事件会重复触发.
firefox就没有这样de问题.
<img src=”http://zi.csdn.net/intel_120×60.gif” onload=’gorush(this)’>
<script type=”text/javascript”>
//by Go_Rush(阿舜) from http://ashun.cnblogs.com/
function gorush(obj){
alert(”如果imgdesrc为多帧gif动画,这个会重复弹出”)
}
</script>
解决办法:
<img src=”http://zi.csdn.net/intel_120×60.gif” onload=’gorush(this)’>
<script type=”text/javascript”>
//by Go_Rush(阿舜) from http://ashun.cnblogs.com/
function gorush(obj){
alert(”这样,就只会弹出一次”)
obj.onload=null;
}
</script>
如果 src设置为 静态 gif 或者 jpg ,bmp等其他格式,也不会出现这个bug