Shulou(Shulou.com)06/01 Report--

This article editor for you to introduce in detail "DIV CSS HACK and browser compatible methods are", detailed content, clear steps, details handled properly, I hope that this "DIV CSS HACK and browser compatible methods have" article can help you solve doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

one。 Introduction

This article includes 8 particularly useful tricks that you will use when you encounter problems in css design.

two。 Selector for browser

These selectors will be very useful when you need to do css design for a dabbling device.

IE6 and its earlier version

* html {}

IE7 and its earlier version

*: first-child+html {} * html {}

For IE7 only

*: first-child+html {}

IE7 and modern browsers

Html > body {}

Only ancient browsers (IE7 is not practical)

Html > / * * / body {}

Opera9 and its earlier version

Html:first-child {}

Safari

Html [xmlns*= "] body:last-child {}

To use these selectors, put them in front of the pattern. For example:

# content-box {width:300px;height:150px;} * html # content-box {width: 250px;} / * overrides the above style and changes the width to 250px in IE 6 and below * /

three。 Let IE6 approve of PNG transparency

An IE6 Bug caused drug annoyance, and he did not approve of clear PNG pictures. (css implements ie6 png pictures.)

You need to use a css filter

* html # image-style {background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src= "fil ename.png", sizingMethod= "scale");}

four。 Remove the dotted line of the hyperlink (useful for FF only)

Under FireFox, a dotted line appears in the core when you click on a hyperlink. This is easy to manage, but it is important to include outline:none in the tagging tricks.

A {outline: none;}

five。 Define the width of an inline element

If you define the width of an inline element, it is only valid under IE6. All HTML elements are either inline elements or block elements. In-line elements include:, and. Block elements include

, and. You cannot define the width of an in-line element. You can change the in-line element to a block element in order to solve this problem.

Span {width: 150px; display: block}

six。 Center the page with rest width

In order to center the page in the browser, you need to locate the outer div relative to it, and then configure margin as auto.

# wrapper {margin: auto;position: relative;}

seven。 Picture change technology

It is better to use words than pictures as headlines. Pen and ink on screen readers and SEO Fanqu straight short and long friends.

HTML:

Main heading one

CSS:

H2 {bac kilogram round: url (heading-image.gif) no-repeat;} H2 span {position:absolute;text-indent:-5000px;}

You can see that we use scale as a label for title problems and use css to transform text into pictures. The text-indent attribute pushes the pen and ink to the 5000px on the left side of the predator so that it is not visible to the hunter.

Turn off css and see what the head looks like.

eight。 Minimum width

One of the other cracks in IE6 is that it does not support the min-width attribute. Min-width is also useful, especially for elastic templates, they have a 100% width, and min-width can tell the hunter not to tighten the width at any time.

For everything except IE6, you only need one min-width: Xpx; such as:

.container {min-width:300px;}

In order for him to work under IE6, we need some special tasks. At the very beginning, we need to set up two div, one to collect the other:

Content

Then you need to define the min-width attribute of the outer div

.container {min-width:300px;}

It is time for IE hack to show off his talents. You need to include the following code:

* html .container {border-right: 300px solid # FFF;} * html .holder {display: inline-block;position: relative;margin-right:-300px;}

As the outer div width of the browser window is depressed to adapt until it shrinks to the width of the border, it will not shrink further. The holder of DIV followed suit and also stopped shrinking. The width of the outer div border becomes the minimum width of the inner div.

nine。 Hidden level scroll bar

In order to prevent the horizontal turning bar, participate in overflow-x:hidden in body.

Body {overflow-x: hidden;} has read this article, "what are the compatible methods of DIV CSS HACK and browsers?". If you want to master the knowledge of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.