Browser remedies, bugs, and Solutions (Part I)

Solution | Browser

If the world is beautiful, browsers have no flaws, the rules of the Global consortium are clear, and this article will never appear. Welcome to the real world. In this article, we will explore the typical problems/bugs that exist under Web standards (or CSS specifications) in several mainstream browsers, providing the appropriate solution (Hacks/filters).

NN 4.x

It is fortunate that we live in this age. This antique browser 10 years ago, Netscape Navigator (Netscape Navigator) 4.x, finally only 0.3% of the market share, most of the site also declared no longer support. It has the most basic CSS support, and there are still a lot of die-hard (I believe fewer and less), so still have designers for it design style. But can only change the font, color and so the most basic things. So, I mean, if you're going to have to consider NN 4.x, it's a good idea to make a basic style for it and hide its unrecognized, advanced style (for other browsers). It is easy to do because NN 4.x is not recognized @import . Examples are as follows:

<link rel="stylesheet" tyle="text/css" href="basic.css" /><style type="text/css">@import(advance.css)</style>

This method worked. But please note that this is not without side effects. If only use @import but not link the case, may lead to IE instantaneous no style (Fouc, see www.bluerobot.com/web/css/fouc.asp. Fortunately, NN 4.x only recognizes screen this media type, so avoiding fouc is not an option:

<link rel="stylesheet" tyle="text/css" media="screen, projection" href="advance.css" />

So let's not waste too much energy on it, unless your boss is still using it.

IE 5.x/win

Here we refer to IE 5.0 and IE 5.5 on the Windows platform. CSS support is still bad, but it has changed considerably compared to NN 4.x. Their notoriously wrong box model may be the first hack in the CSS world. Let's take a look at the box-shaped model first. The box for the standard of the World wide application can be described by adding, that is, the actual box width of an element is accumulated by the content width (contents width ), Border ( border ), margin ( padding ). The IE 5.x/win can be described by "subtraction", also known as the box model (border box), the actual width of an element is the set value of the element width , the border, margins are subtracted from it.

Take a look at an example:

div {width: 200px;margin: 20px;padding: 20px;border: 5px;}

This div actual width is 5px + 20px + 200px + 20px + 5px, according to the World wide standard. For the Ie5.x/win box-like model, the div actual width is 200px, and the content width is compressed to only 150px:200px-5px-20px-20px-5px. At this time, the legendary cattle Tantekçelik (responsible for Ie5.x/mac of the former Microsoft employees, now operating Technorati,microformats founder and one of the contributors) appeared, bringing the box Model Hack. The hack uses the IE 5.x/win Unsupported and voice-family sets some CSS escape quotes (Css-escape quotes) in the value, deceiving ie 5.x/win that the rule block (Declaration blocks) is closed.

div { /*为了更好说明，width调了一下写作习惯*/margin: 20px;padding: 20px;border: 5px;width: 240px;           /* 1. IE 5.x/Win需要的宽度 */voice-family: "\"}\"";  /* 2. IE 5.x/Win看见了}，认为规则已经结束了 */voice-family: inherit;  /* 3. 能够正确解析的浏览器重置该值 */width: 200px;           /* 4. 这才是我们需要的真正宽度 */}

This hack will lead to some minor problems with opera in the same period, but there is no problem with the new version. This is not a problem, considering that non-IE users are happy to upgrade their browsers.

Tantekçelik later invented a better way to treat IE 5.x/win, called a filter (filter). This is similar to the 4.x hidden style of NN, except that it is hidden from other browsers, IE 5.x/win itself identifiable. However, this many additional CSS files. Tantekçelik called band Pass Filter.

Filter for IE 5.0x/win:

@media tty { i{content:"\";/*" "*/}}; @import 'ie50winbandpass.css'; {;}/*";}}/* */

Filter for IE 5.5x/win:

@media tty { i{content:"\";/*" "*/}}@m; @import 'ie55winbandpass.css'; /*";}}/* */

In this way, the CSS for IE 5.0x/win can be written to the IE50WINBANDPASS.CSS, the same, ie 5.5x/win is ie55winbandpass.css. Need to know how to work and more things, you can access http://tantek.com/CSS/Examples/.

There are many other problems that will also occur in the IE6, which we will discuss in the IE6 section. In addition, if you do not have the old machine or the old system to run the two browsers, you can go to the http://browsers.evolt.org/?ie/32bit/standalone to download the green version.

So, we're going to talk about another IE 5.x browser that we often ignore, yes, ie on Mac os.

IE 5.x/mac

At the same time, Ie5.x/mac (previously mentioned by the Tantekçelik) is the most advanced browser, its Tasman engine supports CSS 1, HTML 4.01, PNG 1.0, while also supporting the 2000 appears to be very advanced selector (child Seletor) and adjacent selectors (sibling selector). That is, it also has its own problems.

The problem of IE 5.x/mac is mainly embodied in the processing of positioning elements, floating, unnecessary scroll bars, too wide elements, incorrect overlays, strange boundaries, etc. See schedule.

Hide css for IE 5.x/mac, the most famous Hack is called annotation backslash Hack (commented backslash Hack):

#isnotMacIE5 { display: none;  }#isMacIE5 { display: block; background-color: #060; color: #fff; }/* commented backslash hack v2 \*/#isnotMacIE5 { display: block; background-color: #060; color: #fff; }#isMacIE5 { display: none; }/* end hack */

IE 5.x/mac encountered a backslash (\), the * Escape (escape), so that until the next comment to see the end of the comment, a whole paragraph as a comment treatment, to achieve hidden purposes.

Of course, there are hack that can make your style (table) only for IE 5.x/mac display . Developed by Tantekçelik, Ie5/mac Band pass Filter for Bowman documents: Douglas

/*\*//*/
@import "Ie5mac.css";
/**/

This reverses the commented backslash Hack, which shows ie5mac.css for IE 5.x/mac, while other browsers turn a blind eye. If you need to design for IE 5.x/mac, Ie5/mac Band pass filter will be the most useful tool.

Ie5.x/mac Bugs and Solutions List Bug Solution

An element that is absolutely positioned to the right/bottom of the screen edge causes a vertical/horizontal scroll bar.

div {position: absolute;right: 0;bottom: 0;}

Cancels the hidden 15px boundary.

div {right: 15px;margin-right: -15px;bottom: 15px;margin-bottom: -15px;}

The shortcut (shorthand) boundary does not center a table.

table {margin: 0 auto;}

Use the full (longhand) property to set the bounds.

table {margin-left: auto;margin-right: auto;}

background-imagethe given element background picture is always covered by a border.

Use a different element to set the border, if you want the border to be background-image outside.

Use overflow: auto causes the page to expand to fit the element's content, even if it does not overflow, or it will produce a scroll bar.

Always set overflow: auto the width and height you want.

Element clear inherits the clear value of the parent element that has the value set, even if the element is clear: none not defined.

Currently not resolved

Trailer: Part II discusses IE6, and the third discusses Gecko based browsers (Mozilla Suite, Firefox, Camino, etc.), Safari and opera.