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.
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 expect does exist
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 use private code that, in addition to IE, has no effect in other browsers. If the validator tells you that the code is not defined, it is highly likely that you have used a private style so that it is difficult to achieve consistent results in different browsers.
If you must use floating objects in the layout, don't forget to use the Clear property。
Floating objects seem easy and difficult, and not always desirable. 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's explanation for this might be for you.
avoid applying padding/border and fixed widths to the same element at the same time.
The IE5 block model is wrong, and it does things badly. There are also expedient fixes, but it is best to circumvent this problem by specifying padding for the parent element when the child element's width is fixed.
avoid blinking of the style content not specified under IE.
If you only rely on @import to enter the external style sheet, sooner or later you will find IE there is 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 treats the width as min-width, so the same end result can be achieved by some IE filtering techniques (filtering).
Take the CSS filter (filters) as a last resortCSS tips and filters allow you to selectively apply to (or not apply) certain elements. You should try to find the standard Cross-browser solution to achieve the effect you want, rather than using the filter at all. Think of it as a life-saving means of desperation. Here you can find a lot of CSS filtering tips. Don't confuse the filters in here with the filters in IE. Because browsers have varying degrees of support for CSS standards, many techniques have been found to block out stylesheets or rules that browsers cannot interpret or interpret incorrectly. This is called a CSS filter or trick. ]
If you use anchor points, be especially careful when you apply a hyperlink style.
If you use traditional anchor points (<a name= "anchor" >) in your code, you will notice that hover and: active pseudo classes also work 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 used: Focus, the order should be LVHFA ("The 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. For example, the margin:0 1px 3px 5px indicates 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 you are using. Some browsers Buwei the processing method for unspecified units. Zero is 0, whether it is PX or em or other units, it does not require units. For example: padding:0 2px 0 1em;
test for different font sizes.
Advanced browsers like Mozilla and Opera allow the font to be scaled, regardless of the unit you are using. The default font size for some users is certainly different from yours and do your best to meet them.
with embedded test, change to 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 facilitate layout debugging.
Global rules like div {border:solid 1px #f00;} can temporarily detect layout problems for you. Adding a border to a particular element can help you find the jagged or blank issues that are difficult to detect.
do not use single quotes for picture paths.
When setting a background picture, stick with double quotes. Although it may seem superfluous, if not, Ie5/mac will choke.
do not leave a "vacancy" for future style sheets, such as handheld devices or print-style sheets.
The Mac IE5 the empty style sheet, which can increase the loading time of the page. There should be at least one rule in the suggested stylesheet (even in comments), lest Macie choke.
Also noteworthy are some of the theories that should be noted in the development process, although not for certain functions:
organize your CSS files well
Properly block annotation css, make similar CSS selectors into a group, develop consistent naming conventions and blank formats (for cross-platform considerations, it is recommended that you 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, and then plan to change the text to a red color, the class name no longer has any meaning. Instead, you can use a more descriptive name like. Copyright and. Pullquote.
Combination selector
Keeping CSS short is important for reducing download time. Try to reduce redundancy by grouping selectors, using inheritance (inheritance), and using shorthand (shorthand).
consider affinity when using picture substitution techniques
It has been found that traditional fir in screen readers, as well as the turn off picture display [of the browser] will be problematic. There are other solutions to this, according to the specific circumstances, prudent use.
