JS代码示例

网页制作web前端之家文章简介:JS代码示例:IE6_maxwidth最大宽度.

一、CSS1.根据不同浏览器默认设置不同,页面可初始化样式,调整成一致

//直接操作需要的元素var container =
document.getElementById;container.style.width = (container.clientWidth
> ? width + “px” : “auto”;

2.IE8及以下不支持CSS3

//定义函数,多次调用function setMaxWidth{var container =
document.getElementById;container.style.width = (container.clientWidth
> ? width + “px” : “auto”;}//调用函数setMaxWidth;setMaxWidth;

3.IE6不支持png格式图片

4.IE盒模型跟标准盒模型不同,IE下content部分包含padding+border,即设置width后,再设置padding等属性,宽度会增加

5.a标签中如果有button,
在IE下不能跳转到herf链接,而现代浏览器可以,解决:IE下button设置onclick=”window.location.href(‘#’),现代浏览器设置a中href属性即可。199)
? “200px” : “auto”;//写成函数来运行function setMaxHeight(elementId,
height){var container =
document.getElementById(elementId);container.style.height =
(container.scrollHeight > (height – 1)) ? height + “px” :
“auto”;}//函数示例setMaxHeight(‘container1’,
200);setMaxHeight(‘container2’, 500);

6.IE hasLayout引发的IE6显示不正常BUG

解决办法:设置height,width等属性可激活该属性,推荐设置zoom:1;

7.IE6双边距BUG

元素设置浮动且又设置相同方向的外边距时,会产生双倍的margin边距

解决办法:1.设置 display:inline; 2.利用IE6 hack _margin-left:
实际距离/2px;

8.IE6 hasLayout 布局问题

(1)拥有布局的元素不会收缩

(2)布局元素对浮动进行自动清理

(3)相对定位的元素没有布局

(4)在拥有布局的元素之间外边距不叠加

(5)在没有布局的块级连接上,单击区域只覆盖文本

(6)在滚动时,列表项上的背景图片间歇性的显示和消失

9.IE条件注释<!–[if lt(小)/gt(大) IE 6]>    
<![endif]–>

10.IE6奇数问题

1)字体大小为奇数之边框高度少1px

解决方法:字体大小设置为偶数或line-height为偶数

2)line-height,文本垂直居中差1px

解决方法:padding-top代替line-height居中,或line-height加1或减1

3)与父标签的宽度的奇偶不同的居中造成1px的偏离

解决方法:如果父标签是奇数宽度,则子标签也用奇数宽度;如果是父标签偶数宽度,则子标签也用偶数宽度

11.内部盒模型超出父级时,父级被撑大

解决方法:父标签使用overflow:hidden

12.line-height默认行高bug

解决方法:line-height设值

13.行标签之间会有一小段空白

解决方法:float或结构并排(可读性差,不建议)

14.标签高度无法小于19px

解决方法:overflow: hidden;

15.左浮元素margin-bottom失效

解决方法:显示设置高度 or
父标签设置_padding-bottom代替子标签的margin-bottom or
再放个标签让父标签浮动,子标签

margin- bottom,即(margin-bottom与float不同时作用于一个标签)

16.img于块元素中,底边多出空白

解决方法:父级设置overflow: hidden; 或 img { display: block; } 或
_margin: -5px;

17.li之间会有间距

解决方法:float: left;

18.块元素中有文字及右浮动的行元素,行元素换行

解决方法:将行元素置于块元素内的文字前

19.position下的left,bottom错位

解决方法:为父级(relative层)设置宽高或添加*zoom:1

20.子级中有设置position,则父级overflow失效

解决方法:为父级设置position:relative

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图