Why are there browser compatibility issues?

To understand compatibility first, we need to understand why there are browser compatibility issues. In the development process of major browser manufacturers, they have different implementation of web standards, standards are different, so compatibility problems arise.

Browser kernel

Five major browser kernels and their representative works:

  • Trident: IE, Maxthon, Theworld
  • Gecko: Mozilla Firefox
  • Its Safari, Chrome
  • Presto: Opera
  • Blink: a browser typography engine developed by Google and Opera Softwase

Some of the concepts

  • CSS BUG

    Css styles that parse inconsistently across browsers, or that don’t display correctly in browsers, are called Css bugs

  • CSS hack

    In CSS, hacks are a technique that allows CSS to display correctly in different browsers, since they are unofficial modifications, or unofficial patches, made by individuals to CSS code. Some people prefer to use patch to describe this behavior.

  • Filter

    It is a way to show or hide rules or declarations for a particular browser or group of browsers. Essentially, a filter is a hack type used to filter different browsers.

Filter (filter)

Ps: Filters are, perhaps incorrectly, browser identifiers!

  • _ underscore filter

    When an underscore is added to an attribute, the declaration is ignored because standards-compliant browsers do not recognize the underlined attribute. However, IE6 and earlier browsers continue to parse. Syntax: selector {_ property: property value; } This method is a way to differentiate IE6 from other browsers

  • ! Important Keyword filter

    Syntax: {attribute: attribute value! Important; }

  • * Attribute filters

    If an attribute is preceded by an *, the attribute can be recognized by Internet Explorer 7 and below. Other browsers ignore the function syntax of this attribute: selector {* attribute: attribute value; }

  • + attribute filter

    If an attribute is preceded by a +, the attribute is recognized by Internet Explorer 7 and below, and other browsers ignore the function syntax of the attribute: selector {+ attribute: attribute value; }

  • *+ Attribute filter

    If an attribute is preceded by *+, the attribute can be recognized by Internet Explorer 7. Other browsers ignore the syntax of this attribute: selector {*+ attribute: attribute value; }

  • 9 \

    Syntax: selector {property: property value \9; } * *

  • \ 0

    Syntax: selector {property: property value \0; }

  • -moz-

    Firefox identifies it, but other browsers do not

  • -webkit-

    Webkit is recognized by the kernel browser, but not by other browsers

  • -o-

    Opera recognizes it, but other browsers do not

  • -ms-

    Internet Explorer identifies it, but other browsers do not

Common browser compatibility issues and solutions

1) The picture has a border bug

Description: A border appears when an image is added to IE

Hack: add border: 0; Or border: 0 none;

2) Picture gap

Description: Image gap bug in div

Inserting an image into a div enlarges the bottom of the div by about three pixels

Hack1: will work withWrite on one line; Hack2:Convert to block level element, giveAdd declaration display: block;

3) Double float (double margin) (only IE6 appears)

Description: When ie6 and lower browsers parse float elements, they mistakenly double the float margin.

Hack: add a declaration to the float element: display:inline;

4) Default height (IE6 IE7)

Description: In IE6 and below, some block elements have a default height (around 16px)

Hack1: add a declaration to the element: font-size: 0; Hack2: Add declaration to element: overflow: hidden;

5) Line height alignment of form elements is inconsistent

Description: The row height alignment of form elements is inconsistent

Hack: add a declaration to a form element: float: left;

6) Button elements vary in size by default

Description: The size of buttons in different browsers is inconsistent

Hack3: If the button is an image, use the image directly as the background image of the button.

7) Percentage bug

Description: In IE6 and below, percentages are rounded to the point where 50% plus 50% is greater than 100%. (Also affected by the system)

Hack: Add a declaration to the floating element on the right

8) Bugs in li lists

(1) Float: left; [Fixed] A vertical bug occurs when the child element a is not floating

Hack: Float the parent element li and the child element A

(2) When a in Li converts to block; And li with height and float does not set the float to show the ladder

Hack: Add float to li at the same time

9) If there is no float between the current element (the first child of the parent element) and the parent element, it will be wrong to append margin-top to the parent element

Hack1: Add the declaration overflow: hidden to the parent element;

Hack1: : Adds a float to the child of the parent element

When two elements are aligned up and down, the upper element has margin-bottom and the lower element has margin-top: their spacing does not stack but is set to a larger value

10) Mouse pointer bug

Description: The hand attribute of the CURSOR is recognized only by ie9 browsers and not by other browsers

Hack: If the mouse pointer of an element is hand shaped, add the declaration CURSOR: pointer;

11) Transparent properties

Compatible with other browsers: opacity: value; (value 0-1)

Filter: alpha (opacity=value); The value ranges from 1 to 100 (integers).

12) Html object acquisition problem

FireFox: document getElementById (” idName “);

Ie: document. idName or document.getElementById(” IDName “).

Document.getelementbyid (“idName”);

12) Event. x and event.y problems

Description: IE event object has x, Y attributes, but no pageX,pageY attributes;

Firefox event objects have pageX and pageY properties, but no X and Y properties.

MX (mX = event.x? event.x : event.pageX;) To replace event. X in IE or Event. PageX in Firefox.

13) Window.location.href problem

In IE or Firefox2.0.x, you can use window.location or window.location.href;

In Firefox1.5.x, only window.location can be used.

Solution: use window.location instead of window.location.href.

14) Frame problem

Take the following frame as an example:

<frame src="xxx.html" id="frameId" name="frameName" />
Copy the code

(1) Access frame object:

IE: Use window.frameId or window.frameName to access the frame object. The frameId and frameName can have the same name.

Firefox: This frame object can only be accessed using window.frameName.

In addition, can be used in Internet explorer and Firefox window. The document. The getElementById (” frameId “) to access the object frame.

(2) Switch the frame content:

Can be used in Internet explorer and Firefox window. The document. The getElementById (” testFrame “). The SRC = “XXX. HTML” or Windows. FrameName. Location = “Xxx.html” to toggle the contents of the frame.

If you need to pass frame parameters back to the parent window (not opener, but parent Frame), you can use parent in the frame to access the parent window. For example: the parent document. Form1. Filename. Value = “Aqing”;

15) Modal and modeless window problems

ShowModalDialog and showModelessDialog open modal and modeless Windows; Firefox does not.

Open (pageURL,name,parameters) to open a new window.

If you need to pass parameters from the child window back to the parent window, you can use window.opener in the child window to access the parent window.

Such as:

var parWin = window.opener;
parWin.document.getElementById("Aqing").value = "Aqing"; 
Copy the code

Ps: Did not complete the follow-up update here!