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 may end up in 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 something to add, please post your comments here.
Other language editions of this article: French, German, Spanish, and Hungarian. Please provide other translations.
in doubt, verify first
Validating your code before debugging can often save a lot of hassle. Incorrectly formatted XHTML/CSS can cause many layout errors.
before you test in another browser, write and test the CSS code in the most advanced browsers, rather than the other way around.
If you write and test in a bad browser, your code will have to rely on the poor display of that old browser, and then test in a compliant browser, and you'll be frustrated when you see that the results are "not normal". Instead, you should refine your code before you try to plan for a lower-level browser. That way your code is standard from the start, and you don't have to bother with supporting other browsers. Of course, the current standards-compliant browsers are no doubt Mozilla, Safari or Opera.
Make sure that the effect you want really exists
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 is most likely that you have used a private style and don't expect to get consistent results in different browsers.
If you want to use floating objects in your layout, don't forget to use the clear attribute at the right time.
Floating elements seem easy and difficult to manage. If you find that a floating object extends the bounds of the container or does not display as you expect, check to see if your expectations are correct. See Eric Meyer's tutorial on this question.
consolidation of margins: can be avoided by padding or border.
You may be overwhelmed by the extra (or unwanted) whitespace. If you use margins, the consolidation of the margins may be the cause of the problem. Andy Budd may be able to explain this to you. Here's a little bit more about the structure of Pjblog. If you use flash please check whether the margins are set in the XML file
avoid applying padding/border and fixed widths to the same element at the same time.
The IE5 error block model is the culprit, and it makes a mess of things. Although there is a remedy, it is best to circumvent this problem by specifying padding for its parent element when the child element's width is fixed.
avoid blinking of the style content not specified under IE.
If you use @import to enter the external style sheet, sooner or later you will find IE has a "flashing" problem. Unformatted HTML text appears briefly before CSS styles are applied. This can be avoided.
don't expect min-width to be useful in IE.
IE does not support it, but it willWidthAsMin-width, so the same final effect can be achieved through some IE filtering techniques (filtering).This is depressing, and I'm not going to make this skin.
when cornered, try to reduce the width
Because of rounding errors, sometimes 50% plus 50% equals 100.1%, destroying 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, the 500px box adds a round of 1px frame that he is 502px.
is the display not normal in IE?
It may be that the Peekaboo bugs are at work, especially when the mouse is over the hyperlink to show normal. Fix method See position is Everything.
If you use anchor points, be especially careful when you apply a hyperlink style.
If you use traditional anchor points in your code (<a name= "Anchor" >), you will notice that: hoverAnd: ActiveThe pseudo class also acts on it. To avoid this situation, you can use the ID, or use the lesser-known syntax:: Link:hover,: link:active
Remember "love/hate" (Love/Hate) Link rules
To specify the hyperlink pseudo class in the following order:Link, visited, Hover, acitve。 Any other order is not appropriate. If you use a: Focus, the order should be LVHFA ("Lord Vader's Handle formerly Anakin", Matt Haughey suggested).
Keep in mind the "troubled" (troublesome) border.
The short order of the Border (border), margin (margin), and filler (padding) is: Clockwise from top, right, Bottom, left. Like whatmargin:0 1px 3px 5pxIndicates that the top margin is zero, the right margin is 1px, and so on.
non-0 value to specify the unit.
When you specify a font, margin, or size in CSS, you must indicate the unit used (the only exception is Line-height, which, oddly, does not require a unit). Some browsers Buwei the processing method for unspecified units. Zero is 0, whether it's px or em. All other non-0 values must be explicitly specified. 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, no matter what font unit you use. The default font sizes for some users are certainly different from yours and do their best to satisfy them.
use inline style when testing, and change to external input when publishing.
Embed style sheets in your HTML source code, and you can eliminate a lot of cache errors when testing, especially in some Mac browsers. However, before publishing, be sure to remember to move the style sheet to an external file and introduce it @import or <link>.
add a clear border to help with layout debugging.
Global rules like div {border:solid 1px #f00;} can temporarily detect layout problems for you. Adding a border to a specific element can help you find an overlapping or blank problem that you can't detect. This method is very practical, you must try the
picture path do not use single quotes.
when setting a background picture, persist in double quotes. Although it seems superfluous, Ie5/mac will choke if he does not. this seems to be the easiest to ignore
do not "Occupy" a future style sheet (such as a handheld device or print style sheet). The
mac IE5 to an empty style sheet, which increases the loading time of the page. There should be at least one rule in the suggested stylesheet (even in comments), lest Macie choke.
There are also suggestions that, while not specific to some features, are noteworthy during the development process:
organize your CSS files
properly block annotation css, weave similar CSS selectors into a group, develop consistent naming conventions and blank formats (for cross-platform considerations, it is recommended to use whitespace characters instead of tab.) ) and the appropriate order.
Name the class and ID by feature instead of appearance
If you create a. Smallblue class, you later intend to change the text to a large The color turns red, and the class name doesn't make any sense anymore. Instead, you can use a more descriptive name like. Copyright and. Pullquote.
Combo selector
Keeping CSS short is important for reducing download time. Try to reduce redundancy by grouping selectors, using inheritance (inheritance), and using shorthand (shorthand).
Use picture substitution technology to consider affinity
has found traditional fir in screen readers, and the browser that closes the picture appears to be problematic. There are other solutions to this, according to the specific circumstances, prudent use.
