CSS Bag _ Experience Exchange

Translation: Onestab [2004.03.09]
Original: Mezzoblue CSS crib Sheet

When using CSS to build a station, you must have encountered a variety of layout problems, and finally may be a mess. The purpose of this article is to make your design process easier and provide you with a quick reference when you encounter difficulties.

If you have anything to add, please post your comments here.

In other languages of this article: French, German, Spanish and Hungarian. You are welcome to provide other translations.

in doubt, first verify
When debugging, validating your code will often save you a lot of trouble. Improperly formatted XHTML/CSS can cause many layout errors.
before you test in another browser, write and test your CSS code in the most advanced browsers, not the other way around.
If you write and test in a shabby browser, your code will have to rely on the bad display of that shabby browser, and then test it in a standard browser and see that the results are "unhealthy" and you'll be frustrated. Instead, you should refine your code before trying to plan for a lower-level browser. This way, your code is standard from the start, and you don't have to worry about supporting other browsers. Of course, the current standards-compliant browser is undoubtedly Mozilla, Safari or Opera.
Make sure that the effect you want is really there
Many specific browser proprietary CSS extensions do not exist in the formal standard. If you specify a style for the filter (filter) or scroll bar, you are using private code that has no effect in other browsers except IE. If the validator tells you that the code is not defined, it's very likely that you've used a private style, and don't expect to get a consistent effect in different browsers.
If you have to use a floating object in your layout, don't forget to use the clear property as appropriate.
Floating elements may be difficult and difficult to navigate. If you find floating objects sticking out of the container's boundaries, or not as you would expect, check that your expectations are correct. See Eric Meyer's tutorial on this issue
consolidation of margins: can be avoided by padding or border.
You may be overwhelmed by unnecessary (or unwanted) blanks. If you use margins, the merge of margins may be the source of the problem. Andy Budd's explanation may help you out. again here to add to the structure of Pjblog. If you use Flash, please check if the margin is set in the XML file .
avoid applying padding/border and fixed widths to the same element at the same time.
IE5 the wrong chunk model is the culprit, it makes things mess up. Although there is a remedy, it is best to bypass this problem by specifying padding for the parent element when the child element's width is fixed.
avoid flickering of style content under IE.
If you use @import to enter an external style sheet, you will find that IE has "flashing" problems sooner or later. Unformatted HTML text appears briefly until the CSS style is applied. This can be avoided.
don't expect min-width to be useful in IE.
IE does not support it, but it will widthAs Min-width, so through some IE filtering techniques (filtering), you can achieve the same final effect. This is depressing, and I can't get this skin right now .
when cornered, try to reduce the width
Because of rounding errors, sometimes 50% plus 50% equals 100.1%, which destroys the layout in some browsers. Try to reduce the 50% to 49%, or even 49.9%. and if you use a border (border) Remember to add his width, 500px box added a circle of 1px border that he is 502px.
not displayed properly in IE?
It may be Peekaboo bugs, especially when the mouse is over the hyperlinks to show normal. Repair method See position is everything.
If you use an anchor point, be especially careful when you apply a hyperlink style.
If you use a traditional anchor point in your code ( ), you will notice : HoverAnd : ActivePseudo-classes can also act on it. To avoid this situation, you can use the ID, or use the little-known syntax: : Link:hover,: Link:active
remember the "Love/hate" (Love/Hate) Link rule
To specify the hyperlink pseudo-class in the following order: Link, visited, Hover, acitve。 Any other order is inappropriate. If you use the : Focus, the order should be LVHFA ("Lord Vader's Handle formerly Anakin", Matt Haughey, as recommended).
Please remember the "troubled" (troublesome) border.
The shorthand order for border (border), margin (margin), and filler (padding) is: Clockwise from top, top, right, Bottom, left. Like what margin:0 1px 3px 5px; indicates that the top margin is zero, the right margin is 1px, and so on.
A value other than 0 indicates the unit.
When you specify a font, margin, or size with CSS, you must indicate which unit is used (the only exception is Line-height, which is strange, it does not require units). Some browsers buzuweiping the method of handling unspecified units. Zero is 0, whether it's px or em. Other non-0 values must be explicitly specified units. For example: padding:0 2px 0 1em;
test for different font sizes.
Advanced browsers like Mozilla and Opera allow you to change the font size, regardless of the font units you use. Some users ' default font sizes are definitely different from yours and try their best to satisfy them.
use inline styles when testing, and then change to external input when publishing.
Embed the stylesheet in your HTML source code, and during testing you can eliminate many of the errors caused by the cache, especially for browsers under some Macs. But before publishing, be sure to remember to move the stylesheet to an external file, using @import or Introduced.
Adding a clear border helps layout debugging.
Global rules such as div {border:solid 1px #f00;} can temporarily isolate layout problems for you. Adding borders to specific elements can help you find overlapping or whitespace problems that are difficult to detect. This method is very practical, we must try
picture path do not use single quotation marks.
When setting a background picture, stick to double quotes. Although it looks like superfluous, Ie5/mac will choke if you don't. This seems like the easiest thing to ignore.
do not "occupy seats" for future style sheets (such as handheld devices or printed style sheets).
Mac IE5 a cold on an empty style sheet, which increases the loading time of the page. Suggest that there should be at least one rule in the stylesheet (even if it's a comment), lest Macie choke.

There are also some recommendations that are not specific to some features, but are noteworthy during the development process:

organize your CSS files well
Make a local comment CSS, group similar CSS selectors into groups, and develop consistent naming conventions and whitespace formats (for cross-platform considerations, it is recommended to use whitespace instead of tab.) ) and the appropriate order.
name a class and ID as a function, not an appearance
If you create a. Smallblue class, and later plan to change the text to a larger color, the class name will no longer have any meaning. Instead, you can use more descriptive names such as. Copyright and. Pullquote.
Combo Selector
Keeping CSS short is important to reduce download time. Try to reduce redundancy by grouping selectors, leveraging Inheritance (inheritance), and using shorthand (shorthand).
consider affinity when using picture substitution techniques
Traditional fir has been found to be problematic in screen readers, as well as in browsers that close picture display. There are other solutions to this problem, which should be used sparingly, depending on the situation.

