您的位置：首页 > Web前端

前端那些恨事

2009-09-08 10:15 148 查看

被迫于写前端...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');来处理该层.或许就这里出了问题.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航