Shulou(Shulou.com)06/03 Report--

This article mainly shows you "debugging CSS cross-browser style appears bug how to do", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "debugging CSS cross-browser style appears bug how to do" this article.

The first thing to do is to pick a good browser. My choice is Chrome because it has powerful debugging tools. When I have finished debugging on Chrome, I will then debug on Safari or Firefox.

If the desired results are not achieved on these "good" browsers, it is likely that the code itself violates the CSS rules. Instead of trying to use the hack method to solve the problem on these "good" browsers, you should find out the cause of the problem. I usually check the following possible sources of BUG:

HTML Code interpretation-have you forgotten to close a tag? Do you wrap an inline element around a block element? Code that violates the standard may be interpreted and rendered differently in different browsers.

Use the CSS lint tool to check the CSS code. Pay attention to the Errors checked out. In most cases, Errors is more likely to cause cross-browser differences than Warnings.

Forget to use reset stylesheets and instead rely on (different) browser default CSS styles.

Differences in browser support. Do you use advanced CSS3 attributes or HTML5 elements? Check the browser support documentation to make sure that all browsers of your audience are covered. You need to design "functional degradation" to support old-fashioned browsers. For example, demote a shadow border to a border, or a fillet to a square.

Adding spaces where there should not be spaces may make margin look weird.

Absolute positioning is used, but vertical and horizontal offsets are not set. In this case, the absolutely positioned element will be rendered in the same location as the position:static. However, if you try to change its top,right,bottom or left value, the element will immediately "jump" to the location of the parent element that references its nearest relative position.

Elements of different display styles are combined in an "unusual" way. For example, the W3C standard does not say what a table-cell should look like when it is next to a floating element. Therefore, the code written in this way is not wrong, but it may cause BUG to render different effects across browsers.

Whether spaces affect layout. You should not want the typesetting style to rely on spaces.

Decimal pixel values can lead to different effects across browsers.

Next comes the text.

The most important thing to keep in mind is that the W3C standard does not define wrong behavior. Therefore, if you do not follow the specification, it may lead to different effects across browsers; if you combine "strange" attributes (such as margin and inline element), it may also lead to different effects across browsers.

Display

I think writing CSS is like choosing a journey. You need to make some decisions. For example, you should first choose the elements that use different display methods: block,inline,inline-block and table. When you have made your choice, you can use some specific methods to change the actual display.

Block elements should use margin,padding,height and width. However, line-height does not apply.

Inline elements should use line-height,vertical align and spaces. However, margin,padding,height and width are not applicable.

First, the tables are arranged vertically and horizontally. Second, if you leave out an element in the table, the whole table may have a weird display. Finally, margin does not apply to rows and columns of tables, and padding does not apply to rows of tables and tables.

Positioning

If you choose to use block-level elements, then you need to choose position:

Float-if you use float, the element becomes a block-level element, and the vertical-align and line-height attributes previously applied to the element will be invalidated.

Absolute-the offset is calculated relative to the parent node of the nearest relative positioning. Absolutely positioned elements do not cause reflow when the parent and sibling nodes change. This feature is good for animating effects. However, using absolute positioning and dynamically changing content can lead to display problems. A typical example is a fillet box with absolute positioning.

Static-the default position mode.

Fixed-the element position is relative to the browser window. A method that is not often used.

Relative-usually has no effect on the element style. It's just that the absolute positioning of its subordinate child node will be offset from that node.

I'm not going to list all the display and position combinations here. In short, there are two things to pay attention to:

For the display and position methods I chose, are other attributes (such as margin,line-height) appropriate?

Does the position mode of sibling nodes fit?

For example, is it appropriate to combine float,table-cell and inline elements? How will the browser interpret the rendering? Is there a definition in the W3C standard? If not, there may be a risk of cross-browser bug. Of course, this combination is not impossible, but you need to figure out why you want to do this and do enough cross-browser testing.

Internet Explorer

When you've solved the problem on the "good" browser, it's time to start working on the IE platform. My advice is to start with the oldest version of IE you want to support, as many of the problems with the old version of IE persist in the new version.

Even for IE, you should try to find the problem instead of relying on using the hack method. Blindly using the hack method of * and _ is like adding a correction (as below) to a function that returns an error value, rather than finding algorithmic errors in it.

The code is as follows:

Return result + 4

Of course, sometimes it is necessary to use hack in IE6 and IE7. With IE8, hack is usually used only where CSS3 compatibility is required. In general, there are places where you need to use hack in IE6/7:

HasLayout problem, using zoom:1

Relative positioning causes elements to disappear

3px floating BUG

The floating error of the enlarged container is often covered up by overflow:hidden.

There are also less common situations where you need to use hack, such as triggering a repeating content bug when there is comment code between two floating elements. For css questions that appear only in IE, my advice is to carefully describe what you see and search google for the appropriate solution. Don't blindly use hack to cover it up until you find out the cause of bug. The debugging tools that come with IE are terrible, so you may need to add a background color to the element to make it easier for you to see the actual typesetting on the page.

Implement the solution

When you find the cause of bug and know the solution, you should also know how to modify the code without destroying the existing normal code. Here are my suggestions:

1. Dependent style cascade

two。 Use prefixes for specific browsers

3. Use * and _ for IE6/7

4. Do not use\ 9 for IE8

5. Know when to give up hack for IE

6. Do not use any hack for the latest version of Firefox,Chrome,Safari

1. Dependent style cascade

First, try to rely on style cascading whenever possible. Browsers always take the style of the final declaration that they can read. Therefore, you should start with the style for the older version of the browser, so that the browser can read and use the final style it can understand. For example:

The code is as follows:

.foo {

Background-color: # ccc; / * older browsers will use this * /

Background-color: rgba (0re0j0j0pl 0.2) / * browsers that understand rgba will use this * /

}

two。 Use prefixes for specific browsers

Use prefixes for specific browsers, especially for attributes that have not yet been widely adopted. For example:

The code is as follows:

.foo {

Background: # 1e5799; / * Old browsers * /

Background:-moz-linear-gradient (top, # 1e5799 0%, # 2989d8 50%, # 207cca 51%, # 7db9e8 100%); / * FF3.6+ * /

Background:-webkit-gradient (linear, left top, left bottom, color-stop (0% left top), color-stop (50%), color-stop (51%), color-stop (100%)); / * Chrome,Safari4+ * /

Background:-webkit-linear-gradient (top, # 1e5799 0% coach 2989d8 50% camera 207cca 51% coach 7db9e8 100%); / * Chrome10+,Safari5.1+ * /

Background:-o-linear-gradient (top, # 1e5799 0% memo 2989d8 50% memo 207cca 51% meme 7db9e8 100%); / * Opera 11.10 + * /

Background:-ms-linear-gradient (top, # 1e5799 0% coach 2989d8 50% camera 207cca 51% coach 7db9e8 100%); / * IE10+ * /

Background: linear-gradient (top, # 1e5799 0% memo 2989d8 50% meme 207cca 51% meme 7db9e8 100%); / * W3C * /

}

Note that there are two grammars for different versions of webkit in this code. The order of prefix codes should also be written for older browsers (see Article 1).

If you have a syntax defined by the W3C standard, you should put it at the end (for example, the last line of the code above). In this way, as browsers begin to support the standard syntax of these new features, your code can perform steadily.

3. Use * and _ for IE6/7

For bug specific to older versions of IE, use * and _ to make up for it. For example:

The code is as follows:

.clearfix {

Overflow: hidden; / * new formatting context in better browsers * /

* overflow: visible; / * protect IE7 and older from the overflow property * /

* zoom: 1; / * give IE hasLayout, a new formatting context equivalent * /

}

All IE hack are targeted at a certain version and all previous browsers, such as:

_ for IE6 and earlier

* for IE7 and earlier versions

\ 9 for IE8 and earlier versions (note that IE9 is also sensitive to this hack on some CSS attributes)

Therefore, the order of hack code should also be written for older browsers (see article 1).

4. Do not use\ 9 for IE8

I never use\ 9 to solve the style bug that appears in IE8. I will only use\ 9 to make up for browser support to do "downgrade" processing. For example, I used box- shadow (normal on more advanced browsers), but it was ugly under IE8, so I used\ 9 to add a new border. This situation cannot be handled by style cascading (see Article 1), because this is adding a new style rather than modifying an existing one.

5. Know when to give up hack for IE

Don't try to get exactly the same effect in IE. Are you willing to waste extra HTTP requests, cumbersome HTML/JS/CSS code snippets in order to see the same rounded box effect in IE6-8? Personally, my answer is "no".

You should know when to give up hack for a feature. For example, do not use filter to simulate gradients in CSS3, which can lead to performance problems and typesetting bug. The easiest way is not to expect your web page to behave exactly the same in all browsers at all. For IE 6-8 users, the best way is to give them a simplified user experience (note, it is simplified rather than incomplete).

The following bad code is to use filter to simulate gradient in CSS3:

The code is as follows:

.foo {

Filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0); / * IE6-9 * /

}

6. Do not use any hack for the latest version of Firefox,Chrome,Safari

For styling bug on Firefox,Chrome,Safari, the best way is to check it carefully, probably because your code violates the rules of CSS.

These are all the contents of the article "debugging CSS cross-browser style bug". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.