Last updated: 2004.03.05
Translation: Oneestab [2004.03.09] Original: Mezzoblue CSS Crib Sheet
When using the CSS building, you will definitely encounter the layout problem of the shape, and finally it may be felt. The purpose of this article is to make your design process easier. When you encounter difficulties, you will provide you with a quick reference.
If you have added, please express your opinion here.
Other languages in this article: French, German, Spanish and Hungarian. Welcome to other translations.
Have questions, first verify
In debugging, you can verify your code first often save a lot of trouble. Incorrect format
XHTML / CSS will lead to errors on many layouts.
Before you test in other browsers, please write and test the CSS code in the most advanced browser instead of the opposite.
If you write and test in a shabby browser, your code has to rely on the bad display of the shabby browser, then test in a standard browser, see the display result "not normal", you It will be very depressed. Instead, you should first make your code, and then try to intend to be a lower browser. This starts from the beginning Your code is in line with standards, you don't have to work for other browsers. Of course, the current browser currently compliant is undoubtedly Mozilla, Safari or Opera.
Make sure the effect you want really exists
Many specific browser proprietary CSS extensions
There is no existence in the formal standard. If you are
Filter (Filter) or scroll bar specified style, you are using private code, except
In addition to IE, there is no effect in other browsers. If the validator tells you that the code is not defined, it is very likely that you use private style, don't expect to get the same effect in different browsers.
If you must use floating objects in the layout, don't forget the time-use clearance (CLEAR) attribute.
Floating elements are likely to be difficult, and it is difficult to control. If you find that the floating object extends out of the boundary of the container, or not as you expect, please check if your expectations are correct. Please see this question
Eric Meyer Tutorial
The merger of the margin: can be avoided by Padding or Border.
You may be unable to get the blank blank (or if you want to appear). If you use Margins, the merger of the margin may be the root of the problem.
Andy Budd explains this may be confused.
Avoid application of Padding / Border and fixed widths simultaneously to the same element.
The IE5 error block model is the culprit, it is a mess of things that make things chaos. Although there is
The remedy is preferably bypass this problem. When the width of the child is fixed, the parent element specifies the padding.
Avoid flashing of the style content of the style under IE.
If you use
@Import to enter an external style sheet, I will find IE with "flashing". Not formatted before applying CSS style
HTML text will appear briefly.
This is avoidable.
Don't expect MIN-Width it is useful in IE.
IE does not support it, but it will
Width as
MIN-WIDTH, so through some IE filtered skills, the same final effect can be achieved.
When walking, try to reduce the width
Due to rounding errors, sometimes 50% is equal to 100.1%, destroying the layout in some browsers. Try to minus 50% to 49% or even 49.9%.
Isn't displayed in IE?
It may be that Peekaboo bugs are in their monsters, especially when the mouse passes through hyperlinks. See the repair method
Position is everything.
If an anchor is used, be careful when applying hyperlink styles.
If you use a traditional anchor () in your code, you should notice
: HOVER and
: Active pseudo class also acts on it. To avoid this situation, you can use
ID, or use
Freshly known grammar:
: Link: Hover,: LINK: ACTIVE
Remember "love / hate" link rules
To specify hyperlink pseudo-class: link, visited, hover, acitve. No other order is not appropriate. If used
: Focus, the order should be LVHFA ("Lord Vader's Handle Formerly Anakin",
Matt Haughey is advised to be suggested).
Please remember the "Troubled" border.
Border (border), margin and palden (padding) is: clockwise starting from top, namely Top, Right, Bottom, Left. such as
Margin: 0 1px 3px 5px; indicates that the upper margin is zero, the right distance is 1px, and so on.
Non-zero value should specify units.
Infitable fonts, margins, or large hours with CSS, must indicate the units used (the only exception is
Line-height, very strange, it doesn't require a unit). Some browsers have insufficient processing methods that do not specify units. Zero is zero, whether it is PX or EM. Other non-zero values must be clearly specified. E.g:
Padding: 0 2px 0 1EM;
Test different font size.
Advanced browsers like Mozilla and Opera allow you to change the font size, no matter what font unit you use. Some users' default font size is definitely different from you, and do their best to meet them.
In the test, use the embedded style to release it to external input.
Embed a style sheet in your HTML source code, you can eliminate errors caused by many caches during testing, especially for some of the browsers under certain Macs. But before publishing, be sure to move the style to the external file.
@Import or
introduced.
Plus the obvious border helps layout debugging.
Like
The global rule such as Div {Border: Solid 1PX # f00;} can temporarily check the layout problem. Adding a border for a specific element to help you find an overlap or blank problem that is difficult to find.
Image path does not use single quotes.
When setting up background images, you should insist on using double quotes. Although it seems to be more than one, if you don't do this, IE5 /
Mac will take it.
Do not "occupy a bit" for future style sheets (such as handheld devices or style sheets).
The Mac IE5 is a cold style sheet, which will increase the loading time of the page. At least one rule should be suggested (even if it is a comment), lest Macie.
There are also some suggestions, although not for certain features, it is worth noting during the development process:
Organize your CSS files
Just a blocked CSS, a similar CSS selection is compared to a group, develop a consistent naming habits and blank format (for cross-platform, it is recommended to use blank characters instead of tab.) And appropriate order.
Name the function (not the appearance) to name and ID
If you have created one
The .smallblue class, later planned to change the text, the color became red, this class name no longer has any meaning. Instead, you can use more descriptive names such as
.copyright and
.pull quote.
Combination selector
Keep CSS short small to reduce download time. Please try to choose a selection
Group, use
Inheritance and use shorthand to reduce redundancy.
Consider your affinity when using the image replacement technology
Already discovered
Traditional FIRs will have problems in the screen reader and close the picture display [browser]. There is
Other solutions, should be cautious according to the specific situation.
More info
CSS Zen Garden Master Dave SHEA Interview with Mozilla Debug Page CSS Problem-SolvingCSS ZEN GARDEN Read Mezzoblue More Articles.
