Firefox and IE compatibility summary

Compatibility has always been a headache, the following is a brief summary of the compatibility of Firefox and IE.

1. Hover styles do not appear after hyperlinks are accessed


has been clicked to visit the hyperlink style is not hover and active, many people should have encountered this problem, the solution is to change the order of CSS attributes: L-v-h-a


Code:


<style type= "Text/css" >


<!--


A:link {}


a:visited {}


a:hover {}


a:active {}


-->


</style>





2. How to make continuous long fields automatically wrapped under Firefox


well-known IE direct use of Word-wrap:break-word can be, ff we use the JS Insert method to solve the


Code:


<style type= "Text/css" >


<!--


Div {


width:300px;


Word-wrap:break-word;


border:1px solid red;


        }


-->


</style>


<div id= "FF" >AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA


aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa


aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa


aaaaaaaaaaaaaaaaaaaaaaaaaaa</div>


JS Code


<scrīpt type= "text/javascrīpt" >


/* <! [cdata[* *


function Tobreakword (el, Intlen) {


Varōbj=document.getelementbyid (EL);


var strcontent=obj.innerhtml;


var strtemp= "";


while (Strcontent.length>intlen) {


Strtemp+=strcontent.substr (0,intlen) + "


";


Strcontent=strcontent.substr (intlen,strcontent.length);


            }


strtemp+= "


"+strcontent;


obj.innerhtml=strtemp;


        }    


if (document.getElementById &&!document.all) tobreakword ("FF", 37);


/*]]> * *


</script>








3.ff Why the height of the parent container is not adaptive


after a child container has a floating attribute, the container will not automatically open, and the solution is to add an element that clears the float after the label ends.


Code:


Clear:both;

Double margin bug for
4.ie6


floating originally outside from 10px, but IE interpreted as 20px, the solution is to add


Code:


Display:inline





5. Text in an absolutely positioned container under IE6 cannot be selected properly


This problem exists in IE6, 7, the solution is to let IE into qurks mode. For information about Qurks mode, please refer to:


http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true





6. IE6 below the picture there is a gap generated

There are a number of ways to
this bug, either by changing the layout of the HTML or by setting up IMG as Display:block


or set the Vertical-align property to Vertical-align:top Bottom Middle text-bottom can be resolved.





7. There is a gap between the two layers under the IE6


This IE 3PX bug also appears frequently, the solution is to give. Right is also floating float:left or relative IE6 definition. Left margin-right:-3px;





8. List-style-image cannot be positioned accurately


list-style-image positioning problem is often asked, the solution is generally using Li's background simulation, where the relative positioning method can also be solved.





9. The method in which the content in Li exceeds the length and is displayed by ellipsis


This method is applicable with IE and op browser


Code:


<style type= "Text/css" >


<! --     


Li {


width:200px;


White-space:nowrap;


text-overflow:ellipsis;


-o-text-overflow:ellipsis;


Overflow:hidden;


       }    


-->


</style>





What is the difference between defining ID and class in the 10.web standard?


A. Web standards are not allowed to duplicate IDs, such as Div id= "AA" does not allow repeated 2 times, and class definition is a class, theoretically can be infinitely repetitive, so need to refer to the definition of multiple references can use him.


Two. Priority issues for attributes

The
ID has precedence over class, and look at the example above


three. Convenient JS and other client-side script, if you want to script an object on the page, you can define an ID, otherwise only the use of traversal page elements plus the specified specific attributes to find it, this is a relatively waste of time resources, far less than a simple ID.





11. How to center text vertically


sets the element height and row height to match.


Code:


<style type= "Text/css" >


<!--


div{


height:30px;


line-height:30px;


border:1px Solid Red


     }


-->


</style>





12. How to align text with the input box


plus vertical-align:middle;


Code:


<style type= "Text/css" >


<!--


Input {


width:200px;


height:30px;


border:1px solid red;


Vertical-align:middle;


     }


-->


</style>





13.FF below cannot be centered horizontally


FF set the container's left and right patches below to auto on the


Code:


<style type= "Text/css" >


<!--


div{


margin:0 Auto;


      }


-->


</style>





14.FF Text cannot open the height of the container


Standard browser in the fixed height value of the container is not like the IE6, then I want to fixed height, and want to be able to be stretched how to set it? method is to remove the height set min-height:200px; Here to take care of the IE6 that don't know min-height can be defined like this:


Code:


   {


height:auto!important;


height:200px;


min-height:200px;


    }





15.ie6 the width of the container is different from the FF interpretation


Code:


<?xml version= "1.0" encoding= gb2312 "?>"


<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >


<meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/>


<style type= "Text/css" >


<!--


div{


Cursor:pointer;


width:200px;


height:200px;


border:10px Solid Red


        }


-->


</style>


<divōnclick= "alert (this.offsetwidth)" >web Standard FAQ </div>




The difference between the
problem is that the overall width of the container is not the width of the border (border) in it, here IE6 interpreted as 200PX, and FF is interpreted as 220PX, that is how to cause the problem? Everyone to the container at the top of the XML removed will find the original problem in this, the top of the statement triggered by IE Qurks mode, about Qurks mode, standards mode of knowledge, please refer to:


[url]http://www.microsoft.com/china/msdn/library/webservices/asp.net/


Aspnetusstan.mspx?mfr=true[/url]





16. Why IE cannot set the scroll bar color in web standards

The
solution is to replace the body with HTML


Code:


<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >


<meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/>


<style type= "Text/css" >


<!--


HTML {


Scrollbar-face-color: #f6f6f6;


Scrollbar-highlight-color: #fff;


Scrollbar-shadow-color: #eeeeee;


Scrollbar-3dlight-color: #eeeeee;


Scrollbar-arrow-color: #000;


Scrollbar-track-color: #fff;


Scrollbar-darkshadow-color: #fff;


        }


-->


</style>





17. Why do I define a style that doesn't work?


Here you can't use. AA definition to li How to solve this situation? The answer is to improve. AA priority like #aa ul Li.aa


Code:


<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >


<meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/>


<style type= "Text/css" >


<!--


#aa ul li {


color:red


            }


. AA {


Color:blue


}


-->


</style>


<div id= "AA" >


<ul>


<li class= "AA" >


Web Standard FAQ


</li>


</ul>


</div>





18. IE6 cannot define a container with a height of around 1px


IE6 This problem is due to the default row height, there are many ways to resolve, such as: Overflow:hidden zoom:0.08 line-height:1px





19. Background color cannot be displayed


Code:


<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >


<meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/>


<style type= "Text/css" >


<!--


ul {


background:red


        }


Li {


Float:left;


width:180px;


        }


-->


</style>


<!--[if LTE IE 6]>


<style>


. gainlayout {height:1px;}


</style>


<! [endif]-->


<ul class= "Gainlayout" >


<li>web Standard FAQ </li>


<li>web Standard FAQ </li>


<li>web Standard FAQ </li>


<li>web Standard FAQ </li>


<li>web Standard FAQ </li>


<div style= "Clear:both" ></div>


</ul>


IE set the background color of the UL does not show up, this belongs to the haslayout problem, the solution is also a lot of reference http://www.satzansatz.de/cssd/onhavinglayout.htm

One of the
solutions:


Code:


<!--[If LTE IE 6]>


<style>


. gainlayout {height:1px;}


</style>


<! [endif]-->


<!--[if LTE IE 6]>


<style>


. gainlayout {height:1px;}


</style>


<! [endif]-->





20. How to make the layer appear above Flash


solution is to set the transparent
flash

Code:


<param name= "wmode" value= Transparent "/>"





21. How to align a layer vertically in the browser


Here we use the percent absolute position, with the method of negative value of the outer patch, and the negative value divided by two
for its width height.

Code:


<style type= "Text/css" >


<!--


Div {


Position:absolute;


top:50%;


left:50%;


margin:-100px 0 0-100px;


width:200px;


height:200px;


border:1px solid red;


        }    


-->


</style>





22. Picture vertical and inside the container


Code:


<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">


<style type= "Text/css" >


<!--


* {margin:0;padding:0}


Div {


width:500px;


height:500px;


border:1px solid #ccc;


Overflow:hidden;


position:relative;


Display:table-cell;


Text-align:center;


Vertical-align:middle


        }


Div P {


position:static;


+position:absolute;


top:50%


        }


IMG {


position:static;


+position:relative;


top:-50%;left:-50%;


width:276px;


height:110px


        }


-->


</style>


<div><p><img src= "logo.gif"/></p></div>





or using a background map:


Code:


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





23. How to align div horizontally


The horizontal div can use floating methods such as Float:left, or set objects inline, you can absolutely locate objects, and so on.


Code:


<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >


<meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/>


<style type= "Text/css" >


<!--


Div {


Float:left;


width:200px;


height:200px;


border:1px Solid Red


}


-->


</style>


<div>web Standard FAQ </div>


<div>web Standard FAQ </div>


 

<div>web Standard FAQ </div>

24  Firefox about div height can not be adaptive two solutions
    if you set a div's height, when the div's actual content is greater than the set height, ie will automatically stretch to fit the div container size, FF will fix the height of the div beyond the Div bottom line, and the
    appears to overlap with the following content. If you do not set the height of the Div, in Firefox will not be back because of the contents of the inside and open, and IE automatically based on the content of the open
    solutions:
    1, The last append clear:both style

    <div style= "Background-color: #FF0000 in div internal
        <div style= "Float:left height:200px" >jmedia design</div>
        <div style= "Float:right height:800px" >www.jmedia.cn</div>
        <div style= "Clear:both" ></DIV>
    </ Div>


    2, use Overflow:auto for Div,

    <div style= overflow: auto; "
        <div style= "float:left; Background-color: #000000; height:200px" >1111111111</div>
   &NBSP;&NBsp;   <div style= "Float:right;background-color: #000000; height:300px "" >2222222222</div>
    </div>