被迫于写前端...OK..一下记录了很多的经验之谈...
一切的html , jsp都建立于 doctype 是::
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd ">
之上... doctype关系到浏览器对css解释的一些细节的问题...
1. 绝对定位,相对定位问题...这东西非常恶心.在IE7,FF3.5下.窗口大小改变,他们都会自动的resize绝对定位的层...但IE6则不会...OK.我调试了很久之后,发现需要在绝对定位元素的父元素加入相对定位.方能凑效.但这个父元素(称 祖 元素更合适).可能是body或者就上一级...具体..自己看着办...
2. 很好的IE6...只支持CSS1?记得要IE6,7 FF都兼容,就只有<A>有:hover..
3. 浮动(float:left,right)后的层,记得弄个clear:both的层去关闭...否则...呜呼哀哉
4. CSS截断字符串,使用省略号代替,有2种方法:
(1).ellipsis a{display: block;width: 300px;overflow: hidden;white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;} 缺点: 只有IE能使用,不兼容FF.
(2).
.ellipsis a{display: block;width: 300px;overflow: hidden;white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;}
/* firefox only */
.ellipsis:not(p) {clear: both;}
.ellipsis:not(p) a {max-width: 300px;float : left;} .ellipsis:not(p):after {content: "..." ;float : left;width: 25px;padding-left: 1px;}
缺点: 这里是强制转换,也就是说,省略号在FF中怎么也会出现.
5. jquery的省略号截断代替过长字符串
String.prototype.mylength = function(){
var arr = this.match(/[/u00FF-/uFFFF]/gi);
if(!arr || arr==null)
return this.length;
var len = this.length + arr.length;
return len;
}
String.prototype.mysubstring = function(limit){
var len = 0;
var arr = [];
for(var i=0;i<this.length;i++){
var it = this.substring(i,i+1);
len += it.mylength();
if(len > limit)
break;
arr[arr.length] = it;
}
var result = arr.join("");
return result;
}
jQuery.fn.limit = function(){
$(this).each(function(){
var mylimit = parseInt($(this).attr("limit"));
var applied = $(this).attr("applied");
if(applied)
return;
var text = $(this).text();
var original_text = text;
if(text.mylength() > mylimit){
text = text.mysubstring(mylimit);
text += "...";
text = "<SPAN style=/"position:relative/"><SPAN class='tooltip'>" + original_text + "</SPAN>" + text + "</SPAN>";
$(this).html(text);
$(this).mouseover(function(){
$(this).find(".tooltip").css("display","");
});
$(this).mouseout(function(){
$(this).find(".tooltip").css("display","none");
});
$(this).find(".tooltip")
.css({ 'display':'block',
'position':'absolute',
'top':'2em',
'left':'2em',
'width':'15em',
'border':'1px solid #0cf',
'background-color':'#cff',
'color':'#000',
'text-align':'center',
'word-wrap':'break-word',
'word-break':'break-all'})
.css("display","none");
$(this).attr("applied",true);
}
});
}
function apply_limit(){
$("[@limit]").limit();
}
$(document).ready(apply_limit);
经证实挺好用.
6. jquery的ready()并不是万能.
我当时需要做一个效果.是遮罩层,全世界都知道ie6不知道png的半透明遮罩图片.所以我使用了.DD_belatedPNG.js做预处理.使得兼容了IE6.之后需要给遮罩层定义宽和高.我将所有方法都写在了ready()里面.可惜,无效.无奈.我只好找另一种方法.window.onload=function()来捡来IE FF.的方法来实现,结果成功...在使用遮罩层前,需要使用DD_belatedPNG.js里的方法DD_belatedPNG.fix('#mask');来处理该层.或许就这里出了问题.