Common CSS problems give a "one-stop" solution

css| Solve | The problem

"CSS Crib Sheet" is designed to give a "one-stop" solution to many common CSS problems

If you've ever created one or two websites with CSS, it's easy to see that the browser's support for CSS is still far from perfect. Depending on the complexity of the work, it is likely to lead to such an outcome: sink into the mire of CSS, angry just want to bang the wall, and vowed in the future will never do web design, even if it is a city planning or nuclear physics, are more simple and friendly than CSS.

If you are in this mood, then believe that you are not alone. Behind us, the entire community struggles with the various Shibe that are encountered in standards-based design and shares their successful experience. Based on a lot of available resources, one of the co-authors of the book, Dave Shea, also compiled a document called "CSS crib Sheet". The "CSS Crib Sheet" is designed to give a "one-stop" solution to many common CSS problems, which we should list here. The latest version of "CSS crib Sheet" can be accessed to www.mezzoblue.com/css/cribsheet.

If you are not sure, then verify

If the code can be easily difficult before debugging, it will save a lot of time for us to reduce the experience of many headaches. Improperly formatted XHTML or CSS can cause a lot of layout problems. At this point, using the verification tool can be very enjoyable to find and correct these errors. The consortium provides XHTML and CSS validation tools that can be used inhttp://validator.w3.orgAndHttp://jigsaw.w3.org/css-validatorAccess.

It is important to note that the earlier errors in the document may result in more difficult failures, due to improper nesting, and that the failure is not necessarily a real mistake. We recommend fixing some obvious errors first, and then verifying that the total number of errors may plummet.

When you create and test a CSS, you start with the highest and most advanced browsers, and then consider other browsers

If you first create and test CSS based on older browsers, the code will inevitably depend on the backward and wrong rendering rules in these browsers. This will then become difficult when adjusted in more advanced, more compliant browsers-a regressive act.

Therefore, if you first write based on advanced browsers, and then adjust for those non-standard browsers, the code will be very standard from the outset, and the process of adjustment will be very easy. In the current case, it should be first tested in Mozilla, Safari or Opera, and then adjusted in IE.

If you are using a float to implement the layout, make sure the float is properly cleared

The use of floats is very tricky, and it's not always "obedient". If a floating element exceeds the expected boundary, or whatever other reason is different from the expected performance behavior, the first thing to be confirmed is the rationality and correctness of the intended target. For this question, check out Eric Meyer's tutorial on his website complex Spiral Consulting (www.complexspiral.com/publications/containing-floats).

apply an inner margin or border to an element to avoid overlapping of the outer margin

Sometimes there is a gap between the elements that you don't want to see, and you don't have to keep the elements at a distance. If the effect is to be realized from the outside, then the culprit is the outside overlap. Andy Budd explained the phenomenon in detail on his website (www.andybudd.com/archives/2003/11/no_margin_for_error).

avoid specifying an explicit inner margin/border value and width/height value for the element at the same time

The IE5.0 and IE5.5 browsers on the Windows platform understand the box model incorrectly, so when you specify a height or width for an element, the result is often not what we want. Although there have been some expedient for this problem (please refer to thehttp://tantek.com/CSS/Examples/boxmodelhack.htmlBut it's best to avoid it from the source. For example, if an element needs a fixed width/height, it can either be propped up with the outer margin value of its child elements, or it can be constrained by the inner margin value of its parent element.

avoid IE6 "no style content instantaneous" phenomenon

If you use the @import statement to introduce an external style sheet, you will sooner or later find the IE6 "flashing" problem, that is, HTML code without CSS formatting is briefly in the browser now. We can avoid this problem by using the link element, or by adding a SCRIPT element to the page. For more information, please refer to this article on the bluerobot.com website: "Flash of Unstyled Content" (www.bluerobot.com/web/css/fouc.asp)

do not rely on the Min-width/min-height property

The two properties are not supported by IE on the Ie/win platform, but in some cases the width and Height properties are considered to be min-width or Min-height properties. Therefore, with the help of some filter rules designed only for IE on Windows platform, we can achieve the effect of min-width or min-height with the width and height properties. Mezzoblue.com on the article "" Min-height:fixed (Mezzoblue.com/archives/2004/09/16/minheight_fi).

try to reduce the percent value

Rounding errors in browser calculations sometimes make 50%+50% equal to 100.1, causing the layout to be corrupted. Try a slightly reduced percentage value, such as changing 50% to 49% or 49.9%.

IE has a complete display of content?

If the content of the page does not show completely, but in the mouse hover on a link when it can be normal display, then the likelihood is to encounter the IE "Peekaboo bug." Refer to the article on the position is everything Web site for the solution: ( www.positioniseverything.net/explorer/peekaboo.html)

Make sure that the effect you want to implement does exist

Some browsers make CSS extensions that are not in the official specification, such as filters and scrollbar styles in IE, which cannot be applied to other browsers. If the validation tool shows that some of the code is undefined, these effects will most likely not show consistent behavior across browsers.

Keep in mind the "love/hate (Love/Hate)" link rule

When you specify a pseudo class for a LINK element, keep in mind the following order: Link,visited,hover and active. Any other order of declarations can cause problems. If you want to consider: the focus pseudo class, then you can change the rule to LVHFA (you can remember this order by using the memory method given by Matt Haughey "Lord Vader's Handle formerly Anakin").

indicate units for a value other than 0

When you specify a value for a font, margin, or element size with CSS, you must indicate the unit used (the only exception is the Line-height property, which is not required, although we can also specify the unit for it). Some browsers do not Buwei the value of the unit, and we cannot assume that other browsers will do the same. Zero is 0, there is no need to distinguish between px or em. But not 0 value but must indicate the unit of measurement. For example: paddin:0 2px 0 1em;

test for different font sizes

Advanced browsers such as Mozilla and opera allow the user to resize the font, regardless of the unit used to specify the original size of the font. There must be some user fonts that are different in size from ours, so we should try to take these possible changes into account when declaring font sizes.

uniform capitalization in HTML and CSS

In most browsers, CSS is case sensitive. If both CSS and HTML use the same homepage as the name of a class, then nature works well. However, if you change the rule to "homepage" in CSS, it will be problematic in some user agents (such as Mozilla browsers) that strictly adhere to the CSS specification.

use embedded style when testing, then change to external input when publishing

If you embed a style sheet into the <style> tag in your HTML source code while testing, you can avoid many of the incorrect behavior caused by the browser cache. This is critical for some older browsers. But before publishing, remember that you have to move these styles to an external file and then introduce them with @import or <link>, otherwise you won't get the benefits of external CSS.

Auxiliary Debug layout with a clear border

* {border:solid 1px #f00;} Global rules like this can help you check out a lot of subtle layout errors. Adding a border to a particular element also makes it easier to find some elements that are difficult to detect, overlapping or extra whitespace problems.

do not use single quotes when specifying a picture path

It is not necessary to set the quotation marks for a background picture. In addition, if the single citation presented to the picture path, then IE on the Apple machine will not load the image correctly. So you either use double quotes, or you don't need any quotes at all.

If you use anchor, be careful when you apply a style to the hyperlink

If a traditional anchor point (such as <a name= "anchor" >) is used in your code, you will find that hover and: the style of the active pseudo class is also applied to it. We can use unique IDs (such as <div id= "anchor" >), or Chang a little-known strange syntax: Link:hover and: link:active to avoid this situation. Please refer to www.dbaron.org/css/1999/09/links.

don't proactively link to an empty style sheet as a placeholder (such as a handheld device or a print style sheet)

The IE5 of the Apple machine is sensitive to the empty style sheet, and the load time of the page will become longer. Therefore, we recommend that there should be at least one rule in the stylesheet (even if it is commented) or simply not linked.

understand the problem

Understanding the problem is the key to fixing the problem, which is perhaps one of the most useful suggestions we can offer. There is no other way to get to know the common problems in CSS, only time is the price of experience.

Suppose that in IE on the Windows platform, a floating element is found to have a 3-pixel horizontal spacing next to it, and that it appears only in that browser. If you do not know that this is a flaw in IE when dealing with floating elements, you may try to bridge this puzzling spacing by using negative margin values, relative positioning, or applying some CSS hack to other surround elements.

However, if you know the unique flaw of IE on the Windows platform, that is, to automatically add extra margins of 3 pixels to some floating elements, you don't have to guess and try the above method one by one.

The other problem with trying to fix this elusive flaw is that such flaws can be superimposed. If you've added a lot of such puzzling patches to the page, the entire page structure will be full of display problems and can no longer stabilize. If earlier problems were not properly addressed, the subsequent process of engineering in development would become more difficult.

But if you are aware of the true cause of a defect that you have encountered, the process of debugging will become quite straightforward. "CSS Crib Sheet" is just the beginning, and many other sites have also discussed in detail the problems of a particular browser in the rendering process. This is a start, and many other Web sites have also discussed in detail the problems of a particular browser in the rendering process. Here we strongly recommend starting the next study from the position is Everything (www.positioniseverything.net) website.