前端开发经典问题总结.docx

此上传按钮各个阅读器厂家兼容性完全不同，谷歌，苹果一类，最好控制，IE，火狐完全扯淡不支持对样式进行控制

扯淡的兼容性哇

.class{

position:

relative;

top:

-39px;

right:

-200px;通用

*right:

20px;IE7

right:

20px\9;IE8

_right:

0px;IE6

height:

39px;

width:

440px;

filter:

alpha（opacity:

0）;opacity:

0;

}

断行变形的问题

天天礼拜一礼拜二礼拜三礼拜四礼拜五礼拜六礼拜日

若是此行中有人为换行，这会引发样式变形，阅读器解读为空格

Css优先级问题

针对样式优先级情况，内部样式大于继承，继承大于id，id大于class

如

#ff0000;”>

Pspan{color:

#ff0000;}

#color{#000;}

.color{#fff;}如上，优先级逐级下降

jQuery的空格问题

var$demo=$（‘.test:

hidden’）;

有空格的含义：

选中类test下隐藏的元素

var$demo=$（‘.test:

hidden’）;

无空格的含义：

选中类名为test的隐藏的元素

绝对定位，相对定位

Position：

absolute绝对定位，默许情况下其父元素对象是阅读器的左上角，若父元素也是绝对定位，则对象是父元素

Position：

relative相对定位，针对父元素定位

插入节点方式

First---append（）$（“p”）.append（“hello”）;

example:

Isay:

hello

appendTo（）$（“hello”）.appendTo（“p”）;

Iwantsayhello

针对li:

first-childli:

last-child这种伪类，ie他nia的不支持

Focus，点击input输入框，

这种特效，input:

focus

{outline:

1pxsolid#ff0000;}可以设置；

$（“element”）.css{“height”}获取对象所设置的高度

$（“element”）.height（）;获取对象的实际高度

$（“element”）.width（“100px”）设置宽度

text-indent:

-999px;作用：

显示图片效果，内含文字，为了便于SEO的抓取，隐藏掉文字

JS变量概念

Js变量概念不可利用”-“这个符号例如：

varpage-count=1;这样是失效的，在css里可以.page-count概念

Js反义字符

\r回车\n换行，一般同时在一路利用”\r\n”

Select属性multiple=”multiple”，若是不加这个属性，默许只可以选一个

jQuery中对象操作“this”的对象转换问题

$（'tbody>tr'）.click（function（）{

$（this）

.addClass（'selected'）

.siblings（）.removeClass（'selected'）

.end（）

.find（':

radio'）.attr（'checked',true）;

}）

addClass时仍是默许对象，当执行到siblings这个方式时this已是原对象的兄弟们了（siblings（）），因此要结束这个siblings的返回到原对象

jQuery默许click事件

前台设计组

前台开发组

后台开发组

$（function（）{

$（''）.click（function（）{oggleClass（"selected"）iblings（'.child_'+.toggle（）;lick（）;

}）

css关于"浮动边距加倍"及其解决方式

css关于"浮动边距加倍"及其解决方式-------解决方案是在这个div里面加上display:

inline;

写div代码的时候,常常发现明明宽度算得很准确,可是莫明其妙的会和计划的布局不太一样--|||

开始以为自己代码写的有问题,拼命找bug也一无所得,最后可能会略微修改样式来达到想要的效果,但终究也是外道..昨晚寻根究底了一次...我靠..原来是IE的问题-_,-

今天跟半半唠叨起这件事,还说要加入反IE的行列来着...为啥别的都没问题就IE有问题嘛..-x-

浮动边距加倍错误（TheIEDoubledFloat-MarginBug）

若是某条边与浮动方向同向，则向该边上的浮动框应用边距时，边距会增加一倍。

此错误只影响一次或多次浮动的某行中的第一次浮动。

#ax{

float:

left;-----------------------------设定了左浮动

width:

500px;

height:

100px;

}

#bx{

float:

left;

width:

150px;

height:

50px;

margin:

00010px;--------------设定了左侧距10px

}

.在不知道的情况下,以前多半会选择减少div宽度,感觉是margin和宽度之间出了问题..

解决方式:

在margin后面跟一句display:

inline;就可以够了...可是我翻了半天也没有翻到原理,只是说,在这样的情况下,用这样一个声明,就可以够阻止IE的边距翻倍,而且并无任何inline的效果,没有副作用

这个bug实在是很常见==....听说以前被以为是无法改良的IE的bug...此刻虽然IE仍是有这bug,但伶俐的人们找到了对付它的方式

=================================

问题1：

以DW编辑器为例，在页面做完后，点“文件〉检查页〉阅读器兼容性”，检查你所做的页面在各个阅读器中是不是显示正常，若是出现以下问题：

“浮动边距加倍错误”

“若是某条边与浮动方向同向，则向该边上的浮动框应用边距时，边距会增加一倍。

此错误只影响一次或多次浮动的某行中的第一次浮动。

margin加倍的问题设置为float的div在ie7下显示正常可是在ie6下设置的margin会加倍。

这是一个ie6都存在的bug。

解决方案是在这个div里面加上display:

inline;

针对部份IE，阅读器解析样式表错误问题，例如，一个写法完全正确的样式表及页面，表现却不正常，这极有可能是样式表或页面中的汉语注释引发的

针对继承问题，看例子

、

针对这种标签的写法，必然要注意对最外ul下的li的概念，若是外面li和内部li都要有高度，宽度的概念必然要控制继承问题，一种替换内部标签（替换红色标签，找其他标签代写）

firefox下inputtype="file"的size是多大[原]

firefox对type="file"的input的width概念目前是不支持的，可是FF支持size属性，可以给size设置一个值，来控制上传框的大小。

可是这个size值怎么设置，size="10"是多宽，默许值又是多少，不能光凭感觉去设置。

用脚本来查看下：

        $（function（） {

            var fileArray = [];

            var i = 0;

            while （i < 100） {

                （i + ":

"）;

                i++;

            }

            （""））;

            $（"input:

file"）.each（function（） { $（this）.after（"" + $（this）.width（） + ""） }）;

           }）;

XX文库-让每一个人平等地提升自我在火狐下取得这样的结果：

发现了必然的规律，默以为208像素，size="1"时为85像素，每一个size之间相差个像素的宽度，所以咱们可以动态的设定size的值，如：

 if （$. { $（this）.attr（"size", 1 +  - 85） /  }

javascript引用外部文件优势：

可保护性好----遍历不同的ＨＴＭＬ页面的ＪａｖａＳｃｒｉｐｔ会造成保护问题

可缓存―――阅读器能够按照具体的设置缓存链接的所有外部ＪａｖａＳｃｒｉｐｔ文件

可适应未来―――

ＥＣＭＡＳｃｒｉｐｔ区分大小写

第一个字符必需是一个字母、下划线或美元符号

其他字符可以是字母、下划线、美元符号或数字

只要意在保留对象的变量尚未真正保留对象，就应该明确让变量保留ｎｕｌｌ值

ｂｏｏｌｅａｎ类型的值是区分大小写的，Ｔｒｕｅ不等于ｔｒｕｅ，Ｔｒｕｅ只是一个标示符

科学计数法：

１８０００＝１．８ｅ４；０．００００００５＝５ｅ－７

浮点数值计算不准确

ｉｓＦｉｎｅ（）函数验证数值是不是在规定范围内。

ＮａＮ―――Ｎｏｔ　ａ　Ｎｕｍｂｅｒ，函数ｉｓＮａＮ（＂ｂｌｕｅ＂）参数ｂｌｕｅ不是ｎｕｍｂｅｒ类型会返回ｔｒｕｅ

ｉｓＮａＮ（）函数验证参数能不能够转换成数值类型。

有三个函数可以把非数值转换为数值：

Ｎｕｍｂｅｒ（）；ｐ·ａｒｓｅＩｎｔ（）；ｐａｒｓｅＦｌｏａｔ（）；

设置table的难看的自带的边框问题：

属性 border-collapse:

collapse