IE和Firefox对换行的不同处理

发表于 2009-01-20 | 分类于 WebDev

其实题目不太确切，应该是对回车(Return，即r)换行(New line，即n)的不同处理

看示例就明白了：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
<!--
function removeLineBreaksIE() {
	var testDiv = document.getElementById('test');
	var text = testDiv.innerHTML;
	testDiv.innerHTML = '<pre>' + text.replace(/rn/ig, '') + '</pre>';
}
function removeLineBreaksFx() {
	var testDiv = document.getElementById('test');
	var text = testDiv.innerHTML;
	testDiv.innerHTML = text.replace(/n/ig, '');
}
//-->
</script>
</head>
<body>
<div id="test">
<pre>
line 1
line 2
line 3
line 4
</pre>
</div>
<button type="button" onclick="removeLineBreaksIE();">Remove line breaks for IE!</button>
<button type="button" onclick="removeLineBreaksFx();">Remove line breaks for Firefox!</button>
</body>
</html>

其中pre的部分参考上一篇文章

IE、pre、innerHTML

发表于 2009-01-14 | 分类于 WebDev

先来看个很简单的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>innerHTML Test</title>
<script type="text/javascript">
<!--
function doPreTest() {
	var pre = document.getElementById('preTest');
	pre.innerHTML = pre.innerHTML;
}
//-->
</script>
</head>
<body>
<pre id="preTest">
1\. first line.
2\. second line.
3\. third line.
</pre>
<button type="button" onclick="doPreTest()">点我</button>
</body>
</html>

分别在IE和Firefox下运行会得到不同的结果，看代码会发现实际上只是执行了一条看起来是无意义的操作(这里只是举例子)：

1 2	var pre = document.getElementById('preTest'); pre.innerHTML = pre.innerHTML;

搜啊搜，终于找到了对此问题的描述：

IE applies HTML normalization to the data that is assigned to the innerHTML property. This causes incorrect display of whitespace in elements that ought to preserve formatting, such as <pre> and <textarea>

知道原因了还是不知道怎么解决，单纯针对pre标签的话，可以连pre标签一块替掉，或者再包一层pre，如下：

1 2	var pre = document.getElementById('preTest'); pre.innerHTML = '<pre>' + pre.innerHTML + '</pre>';

查看演示，textarea也可以用类似的思路解决：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>innerHTML Test</title>
<script type="text/javascript">
<!--
function doPreTest() {
	var pre = document.getElementById('preTest');
	pre.innerHTML = '<pre>' + pre.innerHTML + '</pre>';
}
//-->
</script>
</head>
<body>
<pre id="preTest">
1\. first line.
2\. second line.
3\. third line.
</pre>
<button type="button" onclick="doPreTest()">点我</button>
</body>
</html>

IE中li显示高度的bug

发表于 2008-10-23 | 分类于 WebDev

具体表现为：
当li内嵌套其他容器时，在IE下实际占用的高度(offsetHeight)会比内嵌容器的高度多出几像素，而且多出来的像素数在IE6和IE7下似乎还不太一样
此时li的样式：

<style type="text/css">
li .classname {
    margin: 0;
    padding: 0;
}
</style>

解决方法也很简单，只要添加float即可，在我的应用中还加了宽度，等于是变相实现了display:block的效果：

<style type="text/css">
li .classname {
    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
}
</style>

参考文章：http://www.css88.com/article.asp?id=427

IE显示overflow的bug

发表于 2008-10-16 | 分类于 WebDev

具体问题表现和解决办法：
http://rowanw.com/bugs/overflow_relative.htm

此问题在IE6和IE7下都存在

IE6显示1px高度的bug

发表于 2008-10-13 | 分类于 WebDev

在IE6下运行以下代码测试：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<body>
<div id="test" style="font-size: 1px; height: 1px; line-height: 1px; margin: 0 1px;background: #333">
</div>
</body>
</HTML>
<script type="text/javascript">
<!--
	alert(document.getElementById('test').offsetHeight);
//-->
</script>

得到结果是2，在其他浏览器下得到的都是预期的1，经过测试发现只要删除背景色属性就正常
这实在是个匪夷所思的问题

最后经新软群中hyne大大提醒，在div中加入一个 就能解决(注：直接空格不行)，即：

1
2
3

<div id="test" style="font-size: 1px; height: 1px; line-height: 1px; margin: 0 1px;background: #333">
&nbsp;
</div>

本来以为自己已经把IE6的各种问题触碰的差不多了，竟然还有新的……

利用数组提高IE拼接字符串效率

发表于 2008-07-31 | 分类于 WebDev

今天终于静下心来研究程序的效率问题，竟然发现一个普通的循环拼接字符串在IE下竟然执行了3秒钟时间
搜索发现早就有人对此进行了研究，于是又学到了一招，就是利用数组的join方法
以后得注意着这个问题，当需要拼接的字符串比较多的时候使用如下方法：

function StringBuffer(){
	this._strings = new Array();
}
StringBuffer.prototype.append = function(str){
	this._strings.push(str);
};
StringBuffer.prototype.toString = function(){
	var str = arguments.length == 0 ? '' : arguments[0];
	return this._strings.join(str);
};
//示例
var buffer = new StringBuffer();
buffer.append('This is ');
buffer.append('an ');
buffer.append('example!');
alert(buffer.toString());

在我的代码上实际使用时，原来需要执行3秒多的代码只要600多毫秒就搞定了，一举解决了速度问题
另外arguments对象可以在某些场合派上用场

计算element相对于父容器的偏移量

发表于 2008-07-14 | 分类于 WebDev

如果没有提供parentId参数，则计算相对于给定element的最顶层容器的偏移量
特别需要注意的是，这里所指的父级容器，是指最近的一个有定位的元素，意即设置了position属性为absolute或者relative的

function getOffsetXY(elementId, parentId){
	var element = document.getElementById(elementId);
	var element_X = element.offsetLeft;
	var element_Y = element.offsetTop;
	while (true) {
		if ((!element.offsetParent) || (!element.offsetParent.style) || (!!parentId && element.offsetParent.id == parentId)) {
			break;
		}
		element_X += element.offsetParent.offsetLeft;
		element_Y += element.offsetParent.offsetTop;
		element = element.offsetParent;
	}
	//element_X = element_X - document.body.scrollLeft;
	//element_Y = element_Y - document.body.scrollTop;
	return {
		x: element_X,
		y: element_Y
	};
}

解决Tomcat下Context重复启动

发表于 2008-06-08 | 分类于 Java

配置了个定时抓取任务，结果总是抓取三次
从Tomcat的log上看到该任务所在的Context有三次启动的过程，计划任务也被创建了三次

问题原来出在Host的appBase设置上，原来的设置是这样的

<Host name="www.xxx.com" appBase="/usr/local/projects/xxx/"
	unpackWARs="false" autoDeploy="true"
	xmlValidation="false" xmlNamespaceAware="false">
	<Context docBase="web" path="" reloadable="true" workDir="work">
		<!-- Others -->
	</Context>
</Host>
<Host name="admin.xxx.com" appBase="/usr/local/projects/xxx/"
	unpackWARs="false" autoDeploy="true"
	xmlValidation="false" xmlNamespaceAware="false">
	<Context docBase="admin" path="" reloadable="true" workDir="work">
		<!-- Others -->
	</Context>
</Host>

改成不设置appBase，只对指定的Context设置docBase就ok了

<Host name="www.xxx.com" appBase=""
	unpackWARs="false" autoDeploy="true"
	xmlValidation="false" xmlNamespaceAware="false">
	<Context docBase="/usr/local/projects/xxx/web" path="" reloadable="true" workDir="work">
		<!-- Others -->
	</Context>
</Host>
<Host name="admin.xxx.com" appBase=""
	unpackWARs="false" autoDeploy="true"
	xmlValidation="false" xmlNamespaceAware="false">
	<Context docBase="/usr/local/projects/xxx/admin" path="" reloadable="true" workDir="work">
		<!-- Others -->
	</Context>
</Host>

给Tomcat的Connector设置URIEncoding

发表于 2008-05-30 | 分类于 Java

1
2
3

<Connector port="8080"
        #####Other parameters#####
        URIEncoding="UTF-8"  />

如果不设置，URL上传递的中文就不能被正确解码

IE6用Javascript提交表单的问题

发表于 2008-05-30 | 分类于 WebDev

最近做网站，把IE6能碰到的问题基本碰了个遍，今天又碰到JS提交表单页面不刷新的问题

因为要用图片做按钮来提交表单，所以使用了如下代码：

1	<a href="javascript:void(0)" onclick="submitForm()"></a>

然后css去定义背景什么的，这些略掉

结果在IE6下点提交页面不跳转，折腾的时候又发现有些情况表单实际上已经提交了只是页面没有跳转
看到有人说应该使用setTimeout来提交，经过测试还是不行，根本就没有执行setTimeout里面的方法

最后查到是javascript:void(0)的问题，在IE6中当href=”javascript:void(0)”时是有可能中止当前的js操作的，
改成href=”#”，页面就跳转了(虽然还是有点小问题，就是先更改页面焦点到”#”然后才提交)
更新: 使用 href=”###” 则页面不会进行焦点跳转

当然这个问题可以直接使用div等其他容器的onclick来实现应该就行了，没必要使用a这个超链接标签