真人街机捕鱼

Your Position: Home > News > Tsu City Website Development

Browser compatibility related issues in web front-end development

Date: 2016-12-14 11:16:36 Popularity: label:
share to:
In order to allow the front-end development of the website to run properly on various browser platforms, website designers have to do everything possible to deal with browser compatibility issues in website construction . It is because of this need in website design that a new technology has emerged-CSS Hack.
CSS Hack is the process of writing different CSS codes for different browsers. It is mainly used to solve the problem of incompatible display of the same website design page in different browsers due to the inability of various browsers to parse CSS styles. For different browsers, the CSS Hack website design code can be arranged as follows:
1. The website design code for IE series browsers The exclusive CSS Hack website design code for IE 6 #id {_display: block;} Just add a dash before the CSS properties of the website design.
The exclusive CSS Hack website design code for Internet Explorer 7 #id {* display: block;} Add an asterisk in front of the website design CSS properties to target the exclusive CSS Hack website design code for Internet Explorer 8 #id {margin-top: 10px 9; / * IE8 * /} As shown above, the solution is to add a space and a slash before the semicolon after the CSS properties of the website design and add a number 9.
2. CSS Hack for Firefox Website design code Firefox is one of the most standard browsers. Website design technology can be fully reflected as long as it is not in place, so many front-end engineers also have headaches, and actually want to solve Firefox Compatibility In addition to tying the basics of website design, just write the CSS code into the following image @ -moz-document url-prefix () {} and it will work @ -moz-document url-prefix () {# id {display: block;}}.
3. CSS Hack website design code for Safari
Safari is a new browser in Apple Computer ’s latest operating system, Mac OS X. It replaces the previous Internet Explorer for Mac and uses KDE's KHTML as the computing core of the browser. @media screen and (-webkit-min-device-pixel-ratio: 0) {#id {display: block;}} Compatibility is similar to Firefox.
4. CSS Hack website design code for Opera
Opera, or Opera Software ASA, is a business leader in the desktop, various devices, and mobile web browser markets. It is recognized internationally by end users and industry media for its fast, compact, and better standard compatibility than other browsers. , And is admired by many people online. @media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) {head ~ body #id {display: block;}} this There must be absolutely no perfect things in the world, so when using the above methods to make our website design better compatible with various browsers, it has actually violated the W3C standard for website production.
Browser compatibility issue one:
Different browsers have different default margins and paddings. Symptoms: Write a few tags at random, and without style control, the respective margins and paddings are quite different. Encounter frequency: 100%;
Solution: CSS Riga line 1 * {margin: 0; padding: 0;}
Note: This is the most common and easiest browser compatibility issue. Almost all CSS files will use wildcard * at the beginning to set the internal and external patches of each tag to 0.
Browser compatibility issue two:
After the block attribute tag float, there is a horizontal margin. In IE6, the margin is larger than the setting. Symptoms: The common symptom is that the next block in IE6 is topped to the next line. Pages will encounter the most common browser compatibility issues with float layouts)
Solution: Add display: inline to the tag's style control of float; convert it into inline attributes. Note: The most commonly used is div + CSS layout, and div is a typical block attribute label. When horizontal layout, we usually They are all implemented using div floats. If the horizontal spacing is set using margins, this is a compatibility issue that will inevitably be encountered.
Browser compatibility issue three:
Set a small height label (usually less than 10px). The height in IE6, IE7, and the game exceeds the height you set;
Symptoms of the problem: The height of this label in IE6, 7 and Migration is not controlled, and exceeds the height you set, the frequency of encountering: 60%;
Solution: Set overflow: hidden for labels that exceed the height; or set the line-height to be less than the height you set.
Note: This situation usually appears in the label we set a small rounded background. The reason for this problem is that browsers before IE8 will give the tab a minimum default line height. Even if your label is empty, the height of the label will still reach the default line height.
Browser compatibility issue four:
Inline attribute tag. Float layout is used after setting display: block. There is also a horizontal margin. IE6 spacing bug.
Symptoms of the problem: The spacing ratio in IE6 exceeds the set spacing, and the chance of encountering it: 20%;
Solution: Add display: inline; display: table; after display: block;
Note: In-line attribute tags, in order to set the width and height, we need to set display: block; (except for the input tag, which is more special). After using float layout and horizontal margin, in IE6, he has the bug of horizontal margin after block property float. However, because it is an inline attribute label, if we add display: inline, its height and width cannot be set. At this time we also need to add display: talbe after display: inline.
Browser compatibility issues five:
Symptoms of the default spacing problem: when several img tags are put together, some browsers will have default spacing, and adding the wildcard mentioned in question 1 will not work, the chance of encountering: 20%;
Solution: Use the float attribute to layout the img. Note: Because the img tag is an inline attribute tag, as long as it does not exceed the container width, the img tags will be arranged in a row, but there will be a space between the img tags in some browsers. It is the right way to remove this spacing using float. (One of my students uses negative margin. Although it can be solved, negative margin itself is a usage that easily causes browser compatibility problems, so I forbid them to use it).
Browser compatibility issue six:
Setting the min-height of the label's minimum height is incompatible. Symptom: Because min-height is an incompatible CSS property, setting it to min-height cannot be compatible with all browsers. The chance is 5%;
Solution: If we want to set the minimum height of a label to 200px, the settings that need to be made are: {min-height: 200px; height: auto! Important; height: 200px; overflow: visible;};
Note: When the front end of the B / S system is opened, there are many cases where we have this demand. When the content is smaller than a value (such as 300px). The height of the container is 300px; when the content height is greater than this value, the height of the container is raised instead of the scroll bar. At this time we will face this compatibility issue.
Browser compatibility issue seven:
Compatibility with various special styles, such as transparency, rounded corners, shadows, etc. The code of each browser in the special style is very different, so you can only check the information by writing different codes for different browsers.
JS solves the problem of png transparent invalidation in IE6. The way to make compatible pages is: every time we write a small piece of code (a line or a block in the layout), we have to check whether it is compatible in different browsers. Of course, we are not proficient to a certain degree. So troublesome. Recommended for newbies who often encounter compatibility issues. Many compatibility problems are caused by the browser's different parsing of the default attributes of tags. As long as we set them up, we can easily solve these compatibility problems. If we are familiar with the default attributes of labels, we can understand why compatibility problems occur and how to solve them.
Other compatibility handling points
1, DOCTYPE affects CSS processing
2. FF: After the padding is set, the div will increase the height and width, but IE will not, so you need to set an additional height and width with! Important
3. FF: Supports! Important, which is ignored by IE. You can use! Important to set special style for FF
4. Vertical centering of the div: vertical-align: middle; Increase the line spacing to the same height as the entire DIV line-height: 200px; and then insert the text to center it vertically. The disadvantage is to control the content and not wrap
5. The inconsistent interpretation of the BOX model in mozilla firefox and IE results in a difference of 2px:
div {margin: 30px! important; margin: 28px;}
Note that the order of these two margins must not be reversed. The! Important attribute cannot be recognized by IE, but other browsers can recognize it. So it is actually interpreted like this in IE:
div {maring: 30px; margin: 28px}
If you repeat the definition, it will be executed according to the last one, so you cannot just write margin: XXpx! Important;
Browser differences
1, ul and ol list indentation problem When eliminating the indentation of ul, ol and other lists, the style should be written as: list-style: none; margin: 0px; padding: 0px;
The margin attribute is valid for IE, and the padding attribute is valid for FireFox.
[Note] It has been verified that setting margin: 0px in IE can remove the indentation, white space, and list numbers or dots of the list. Setting padding has no effect on the style. In Firefox, setting margin: 0px only removes the top and bottom. Blank, you can only remove the left and right indentation after setting padding: 0px. You must also set list-style: none to remove the list number or dot. In other words, you can set margin: 0px in IE to achieve the final effect, and you must set margin: 0px, padding: 0px, and list-style: none at the same time in Firefox to achieve the final effect.
CSS transparency issues
IE: filter: progid: DXImageTransform.Microsoft.Alpha (style = 0, opacity = 60).
FF: opacity: 0.6.
[Note] It is best to write both and put the opacity attribute below.
CSS rounded corners
IE: Rounded corners are not supported in versions below ie7.
FF: -moz-border-radius: 4px, or -moz-border-radius-topleft: 4px; -moz- border- radius-topright: 4px; -moz-border-radius-bottomleft: 4px; -moz- border- radius- bottomright: 4px ;.
[Note] The fillet problem is a classic problem in CSS. It is recommended to use the JQuery framework to set the fillet. Let these complicated problems be left to others. However, the rounded corners of jQuery only see the rounded corners that support the entire area, but not the rounded corners of the border. However, the rounded corners of this border can be achieved by some simple means. I will introduce it next time.
4.cursor: hand VS cursor: pointer
Problem description: firefox does not support hand, but ie supports pointer, both are hand-shaped instructions.
Solution: Use pointers uniformly.
5. Different definitions of font size The definition of small font is different. It is 13px in Firefox and 16px in IE, which is quite different.
Solution: Use the specified font size, such as 14px.
Between divs and divs of multiple elements (pictures or links) arranged side by side, spaces and carriage returns in the code will be ignored in firefox, but in IE it is displayed as spaces (about 3px) by default.
6.CSS double line bump border
IE: border: 2px outset ;.
FF: -moz-border-top-colors: # d4d0c8 white; -moz-border-left-colors: # d4d0c8 white; -moz-border-right-colors: # 404040 # 808080; -moz-border-bottom-colors : # 404040 # 808080;
Browser bug
1.Double-sided distance bug in IE
The div set to float will double the margin set under ie. This is a bug existing in ie6.
Solution: Add display: inline in this div;
0
0
0
0
0
0
0
0
Name
Verification Code
Can't see clearly, change another Already Comment information, click to view comments
Comments from users
Next: No information