CSS Brocade SAC _css/html

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.

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.

ensure that the effect you expect is real
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 has no effect in other browsers except IE. If the validator tells you that the code is not defined, it is very likely that you are using a private style, which makes it difficult to achieve consistent results 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 objects may be difficult and not always desirable. 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 for this may be a matter of your doubts.

avoid applying padding/border and fixed widths to the same element at the same time.
The IE5 block model is wrong, and it's doing something bad. There are also workarounds for this, but 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 just rely on @import to enter the external style sheet, sooner or later you will find that IE has "flashing" problems. Unformatted HTML text appears briefly before 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 treats width as min-width, so with some IE filtering techniques (filtering), the same end effect can be achieved.

Take the CSS filter (filters) as a last resortCSS tricks and filters allow you to selectively apply (or not apply) certain elements. As much as possible, you should find a standard cross-browser solution to achieve the effect you want, rather than using filters in a very regular way. Think of it as a life-saving means of desperation. A lot of CSS filtering techniques can be found here. [Note: Do not confuse the filters here with the filters in IE. Because of the varying levels of support for CSS standards in each browser, many techniques have been found to screen out stylesheets or rules that the browser cannot interpret or interpret incorrectly. This is called a CSS filter or trick. ]

If you use an anchor point, be especially careful when you apply a hyperlink style.
If you use traditional anchor points () in your code, you'll notice that: hover and: The active pseudo-class also acts 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 used: Focus, the order should be LVHFA ("Lord Vader's Handle formerly Anakin", Matt Haughey).

remember the "troubled" (troublesome) border。
The shorthand order for border (border), margin (margin), and filler (padding) is: Clockwise from top, top, right, Bottom, left. For example 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 units are used. Some browsers buzuweiping the method of handling unspecified units. Zero is 0, whether it is PX or em or other units, it does not need units. 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're using. Some users ' default font sizes are definitely different from yours and try their best to satisfy them.

with embedded testing, the publication is changed to input.
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.

plus a clear border facilitates 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 jagged or blank issues that are difficult to detect.

do not use single quotes for picture paths.
When setting a background picture, stick to double quotes. Although it may seem superfluous, Ie5/mac will choke if you do not do so.

do not leave an "empty space" for a future style sheet (such as a handheld device or a style sheet for printing).
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.
Also worth mentioning are some of the theories that should be noted in the development process, although not for certain functions:

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 turning off the image display [in the browser]. There are other solutions to this problem, which should be used sparingly, depending on the situation.

