Sorting out css compatibility issues_html/css_WEB-ITnose

1.文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。

2.ff下容器高度限定.即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。

3. 横向上的内容撑破容器问题。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。

4.浮动的清除，ff下必须清除浮动clear:both。

5. double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。解决方案，给浮动容器定义display:inline。

6.margin bug.当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件。解决方案：外层元素设定border 或设定float。

7.吞吃现象.还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。

8.注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“ picRotate start ”方法写注释。

9.img下的留白，大家看这段代码有啥问题：

把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，给img设定 display:block可以解决。

10去line-height。

文字

, Unfortunately, the single line text line-height effect disappears under IE6. . . , the reason is that this inline-block element and the inline element are written together. Solution: Make both img and text float.

11 The hover status of the link. a:hover img{width:300px} We want the width of the image contained in the link to change when the mouse hovers. Unfortunately, it is invalid under ie6 and valid under ie7 and ff.

Hover status of 12 links. div:hover{} This style is not recognized by IE6 and will only work under IE7 and FF.

13blocked a link, with an absolute layer inside, and an img placed inside the absolute layer. Under ie, clicking the img with the mouse will not have a link effect, but it will be normal under ff.

14 float that cannot be completely cleared. Solution: Add zoom:1 to the ul attribute (it is useless to add zoom:1 to li)

15ie under overflow:hidden, the absolute layer position:absolute or the relative layer position:relative is invalid. Solution: Add position:relative or position:absolute to overflow:hidden. In addition, ie6 supports overflow-x or overflow-y features, but ie7 and ff do not support it.

16. There is a serious bug under IE6. If the float element has no width defined, and if there is a div inside that defines height or zoom: 1, the div will fill the entire row, even if you give it a width. If the float element is used as a layout or complex container, it must be given a width.

17． A bug under IE6, an absolutely positioned div contains a relatively positioned div. If the height of the relatively positioned div in the inner layer is given a specific value, the relative layer in the inner layer will have a width value of 100%, and the absolute layer in the outer layer will be stretched. The solution is to give the inner layer a float attribute to the relative layer.

18. Bug under IE, when there is in , the text in the float layer under the position: relative layer cannot be selected. This bug forced me to fix the common style library.

19. Disadvantages of ff. width:100% is very convenient to use in IE. It will search for the width value layer by layer, ignoring the influence of the floating layer. It will search to the end of the floating layer under ff. In this way, you can only add width: 100% to all floating layers in the middle. , Tired.

20． Problem with iE6. When the height of the layer is less than 20px, font-size must be defined under IE6: 0px; otherwise the height is 20px;

21. Under ff, only body and html define height:100% at the same time, and the height is 100%. Under IE, you only need to define body.

22. Vertical centering problem of div:

vertical-align:middle; Increase the line spacing to the same height as the entire DIV line-height:200px; Then insert text and it will be vertically centered. The disadvantage is that the content must be controlled without line breaks.

23. IE hide-and-seek problem

When the div application is complex and there are some links in each column, the hide-and-seek problem of DIV is likely to occur at this time.

Some content cannot be displayed. When the mouse selects this area, it is found that the content is indeed on the page. Solution: Use the line-height attribute for #layout or use fixed height and width for #layout. Keep the page structure as simple as possible.

24． According to web standards, IE cannot set the scroll bar color

The solution is to replace the body with html

25. The border and background of the link (a tag)

A link adds a border and background color, and needs to set display: block,

26. The ul tag has a padding value by default in ff. In IE, only margin has a value

So defining ul{margin:0;padding:0;} first can solve most problems

27.ff: div set margin-left, When margin-right is auto, it is already centered, but IE does not work

ff: When body is set to text-align, div needs to set margin: auto (mainly margin-left, margin-right) before it can be centered

28. The picture is in the center and the text is on the left.

.abc{ text-align:left }

abc img{ display:block ; text-align:center;margin:o auto; }

29. Layer vertical Centered style:

div{

position:absolute;

top:50%;

left:50%;

margin:-117px 0 0 -187px;

width:374px;

height:234px;

background-image:url(images/beijing.jpg);

}

30.form will have an extra line at the bottom in IE6, plus style="padding:0; margin:0;"

32. Empty td displays border table { border-collapse:collapse; }

33. Change the image when the mouse passes over it

function imagechange(img)

{

document.images[0].src=img;

document.images[0].width=400;

document.images[0].height=300;

}

 

34.表单输入框默认文字的设置

function cleanUp(id){

    if(document.getElementById("userid").value == "请输入搜索关键字")

    {

        document.getElementById(id).value = "";

    }

}

35.透明兼容写法：

filter:alpha(opacity=70);-moz-opacity:0.7;

36 文字和图片在同一行垂直居中问题：

一个关键的属性: margin-bottom 通过修改图片的外边框的底部高度就可以让文字移动上来. 做法是把这个值设置为负数.例如我们把下面的16X15的图片设置它的style="margin-bottom:-3px" 这样文字和图片就居中了

兼容性一直都是个令人头痛的问题，下面简单总结火狐与IE的兼容性问题。

37. 超链接访问过后hover样式就不出现的问题 
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A 

1.   

38. FireFox下如何使连续长字段自动换行 
众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入的方法来解决 

1.   

10.

这里是文字

 

 Js代码

1.            

2.      /* 

3. function toBreakWord(el, intLen){

4. var ōbj=document.getElementById(el);

5. var strContent=obj.innerHTML;

6. var strTemp="";

7. while(strContent.length>intLen){      

8.                  strTemp+=strContent.substr(0,intLen)+"      

9.  ";  

10.                strContent=strContent.substr(intLen,strContent.length);        

11.            }  

12.            strTemp+="  

13."+strContent;  

14.            obj.innerHTML=strTemp;      

15.        }      

16.        if(document.getElementById  &&  !document.all)  toBreakWord("ff", 37);      

17.    /* ]]> */     

18.     

 

39.ff下为什么父容器的高度不能自适应 
在子容器加了浮动属性后,该容器将不能自动撑开,解决方法是在标签结束后加上一个清除浮动的元素。 

1.  clear:both; 

2.  样式中加入

.clearfix:after {content:"."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display:inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

然后在有浮动的层的外边加入这个clearfix的样式，如下：

　　

　　

　　

40. Double margin BUG in IE6
After floating, the original margin is 10px, but IE interprets it as 20px. The solution is to add

1. display: inline

41. The text in the absolutely positioned container cannot be selected normally under IE6
This problem exists in IE6 and 7. The solution to the problem is to let IE enter qurks mode. For relevant knowledge about qurks mode, please refer to:
http://www.microsoft.com/..

42. There is a gap below the picture under IE6
There are many ways to solve this BUG , it can be solved by changing the layout of html, or setting img to display:block
or setting the vertical-align attribute to vertical-align:top bottom middle text-bottom.

43. IE6 two There is a gap between the layers
This 3PX BUG of IE also often occurs. The solution is to float .right similarly float:left or define .left margin-right:-3px relative to IE6;

44. List-style-image cannot be positioned accurately
The positioning problem of list-style-image is also often asked. The solution is generally to use the background simulation of li. Here, the relative positioning method can also be used to solve the problem.

45. Method to display ellipsis after the content in LI exceeds the length
This method is suitable for IE and OP browsers

1.

48. How to align text and text input box
plus vertical-align:middle;

1.

49. FF cannot be horizontally centered.

Just set the left and right outer patches of the container to auto below FF.

1.  

50.FF下文本无法撑开容器的高度 
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义: 

1.  {  

2.     height:auto!important;  

3.     height:200px;  

4.     min-height:200px;  

5.   } 

51.IE6下容器的宽度和FF解释不同呢 

1.   

2.   

3.   

4.       

14.

web标准常见问题大全

 

问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、standards mode的相关知识,请参考: 
http://www.microsoft.com/..

52.    为什么web标准中IE无法设置滚动条颜色了
解决办法是将body换成html 

1.   

2.   

3.   

53.    为什么我定义的样式没有作用呢 
这里你无法用.aa定义到li 遇到这种情况怎么解决呢？答案是提高.aa 的优先权 比如#aa ul li.aa 

1.   

2.   

3.        

13.

      

14.

 

15.

•       

  16. web标准常见问题大全  

  17.

 

18.

 

19.

 

54.  IE6无法定义1px左右高度的容器 
IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:

1.  overflow:hidden zoom:0.08 line-height:1px 

55.    背景颜色无法显示 

1.   

2.   

3.   

14.    

19.

 

20.

• web标准常见问题大全
 

21.

• web标准常见问题大全
 

22.

• web标准常见问题大全
 

23.

• web标准常见问题大全
 

24.

• web标准常见问题大全
 

25.

26.

The ul with a background color set in IE is not displayed. This is a haslayout problem. There are many solutions available at http://www. satzansatz.de/cssd/onhavinglayout.htm
One of the solutions:

1.

56. How to make the layer display in FLASH

The solution is to set transparency for FLASH

1.

57 . How to vertically center a layer in the browser

Here we use percentage absolute positioning and patch negative values. The size of the negative value is its own width and height divided by two

1. < ;style type="text/css">                                                                                                              ​​​
8.         width: 200px ; ; >12.--> 

13.

58. The image is vertical and inside the container

1. css">

3.  

28. 

29.

 

59.或者使用背景图的办法: 

1.  background:url("logo.gif") center no-repeat; 

 

60.    如何让div横向排列
横向排列DIV可以使用浮动的方式比如float:left,或者设置对象为内联,还可以绝对定位对象等等. 

1.        

2.        

3.   

13.

web标准常见问题大全

 

14.

web标准常见问题大全

 

15.

web标准常见问题大全

 

61.Firefox 关于DIV高度无法自适应的两种解决
如果设置了一个DIV的高度，当DIV里实际内容大于所设高度，ie会自动拉伸以适应DIV容器大小，ff会固定DIV的高度，超过部分超出DIV底线以外，
出现和下面的内容重叠的现象。如果不给DIV设置高度，在Firefox中将不回因为里面的内容而撑开，而IE中就会自动根据内容撑开
解决方案：
第一种方法：在DIV内部的最后追加clear:both样式

1.  

 

2.      

Jmedia Design

 

3.      

www.jmedia.cn

 

4.      

 

5.  

 

第二种方法：对DIV使用overflow:auto；

1.  

 

2.      

1111111111

 

3.      

2222222222

 

4.  

62. How to make the background of IE-compatible picture transparent:

The first method: define the image format as png8, set it accurately, and dither 100%

The second method Method: Use js (the js source code is as follows, but it is not recommended for pages with too many pictures)

第三种方法：利用滤镜(需要注意的是，background和*html中src里边图片的路径必须是绝对的url，而且class名不可以有包含样式，如ul li.class{}这样的写法是不行的。)

.imgbg{position:absolute;left:0;top:0;background:url(http://icon.cnmo-img.com.cn/app/ie6_img_app_11.png) no-repeat;width:60px;height:60px;z-index:1;zoom:1;cursor:pointer;}

*html .imgbg{background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src='http://icon.cnmo-img.com.cn/app/ie6_img_app_11.png');}