search
HomeWeb Front-endCSS TutorialDifferences in CSS style sheets between browsers Firefox and IE

1 Css style for Firefox ie6 IE7

Nowadays most of them use !important to hack. For ie6 and firefox tests, it can be displayed normally, but ie7 can correctly interpret !important, which will cause the page not to be displayed as required! I found a good hack for IE7 which is to use "*+Html". Now browse it with IE7 and there should be no problem.

Now you can write a CSS like this:

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color : #999; } /* IE7 */

Then the font color is displayed as #333 under firefox, #666 under IE6, and #999 under IE7.

2 Centering problem in css layout

The main style definition is as follows:

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

Description:

First define TEXT-ALIGN: center in the parent element; this means that the content in the parent element is centered; this setting is enough for IE.

But it cannot be centered in mozilla. The solution is to add "MARGIN-RIGHT: auto;MARGIN-LEFT: auto;" when defining the child element. It should be noted that if you want to use this method to center the entire page, it is recommended not to use it. In a DIV, you can split multiple divs in sequence, just define MARGIN-RIGHT: auto;MARGIN-LEFT: auto; in each split div.

3 Different interpretations of the box model. important

                                                                                use using   using   using           through using ’ ’s ’ through out using ’ through ‐ ‐   ‐   ‐                                                  out out through out out out out out out out out Through Out Through outolece out Through together to  Th through ’ through ’ through-the-a-w-www ’ to ff ff

                     

#box{ float:left; width:100px; margin:0 0 0 100px; //In this case, IE will generate a distance of 200px display:inline; //Ignore the float}


Let’s talk about block in detail, There are two inline elements. The characteristic of the Block element is that it always starts on a new line, and the height, width, line height, and margins can all be controlled (block element); the characteristic of the Inline element is that it is on the same line as other elements. ...Uncontrollable (embedded elements);

#box{ display:block; //Can simulate inline elements as block elements display:inline; //Achieve the effect of being arranged in the same row diplay:table;

5 Problems with IE and width and height

IE does not recognize the definition of min-, but in fact it treats normal width and height as if there is min. This is a big problem. If you only use width and height, these two values ​​​​will not change in a normal browser. If you only use min-width and min-height, the width and height are not set at all under IE. For example, if you want to set a background image, this width is more important. To solve this problem, you can do this:

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 Minimum width of the page

min-width is a very convenient CSS command. It can specify that the minimum width of the element cannot be less than a certain width, so as to ensure that the layout is always correct. But IE doesn't recognize this, and it actually treats width as the minimum width. In order to make this command work on IE, you can put a
under the tag, and then specify a class for the div:

Then the CSS is designed like this:

#container{

min-width : 600px;

width:e­ JavaScript, which is only recognized by IE, will also make your HTML document less formal. It actually implements the minimum width through Javascript judgment.

7 Clear Floating h.hackbox {

Display: Table;

// Display the object as a block of elements}}} or

.hackbox {

clear: both;

}

or add: afterr (Pseudo object), set the content that occurs after the object, usually used in conjunction with content. IE does not support this pseudo object and is not supported by Ie browsers, so it does not affect IE/WIN browsers. This is the most troublesome

......#box:after{
content: ".";

display: block;

height: 0;
clear: both;
visibility: hidden;
}

8 DIV floating IE text produces a 3-pixel bug

The object on the left is floating, and the right is positioned using the left margin of the outer patch. The text in the object on the right will have a 3px spacing from the left.

#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//This sentence is the key
}
HTML code


/DIV>

9 attribute selector (this is not compatible, it is a bug in hiding css)

p[id]{}div[id]{}

p[id]{}div [id]{}

This is hidden for IE6.0 and versions below. FF and OPera function

There is still a difference between attribute selector and sub-selector. The scope of sub-selector is reduced in form. , the scope of the attribute selector is relatively large, such as p[id], all p tags with ids are of the same style.

10 IE hide-and-seek problem

When the div application is complex, there are Some links, DIVs, etc. are prone to hide-and-seek problems at this time.

Some content cannot be displayed. When the mouse selects this area, it is found that the content is indeed on the page.
Solution: Use line-height attribute for #layout or use fixed height and width for #layout. Keep the page structure as simple as possible.

11 Height incompatibility


Height incompatibility means that when the height of the inner object changes, the height of the outer layer cannot be automatically adjusted, especially when the inner object uses
margin or paddign. Example:

Content in the p object



CSS:

#box {background-color:#eee } :0px;overflow:hidden;} Or add the border attribute to the DIV.


For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
What does margin: 40px 100px 120px 80px signify?What does margin: 40px 100px 120px 80px signify?Apr 28, 2025 pm 05:31 PM

Article discusses CSS margin property, specifically "margin: 40px 100px 120px 80px", its application, and effects on webpage layout.

What are the different CSS border properties?What are the different CSS border properties?Apr 28, 2025 pm 05:30 PM

The article discusses CSS border properties, focusing on customization, best practices, and responsiveness. Main argument: border-radius is most effective for responsive designs.

What are CSS backgrounds, list the properties?What are CSS backgrounds, list the properties?Apr 28, 2025 pm 05:29 PM

The article discusses CSS background properties, their uses in enhancing website design, and common mistakes to avoid. Key focus is on responsive design using background-size.

What are CSS HSL Colors?What are CSS HSL Colors?Apr 28, 2025 pm 05:28 PM

Article discusses CSS HSL colors, their use in web design, and advantages over RGB. Main focus is on enhancing design and accessibility through intuitive color manipulation.

How can we add comments in CSS?How can we add comments in CSS?Apr 28, 2025 pm 05:27 PM

The article discusses the use of comments in CSS, detailing single-line and multi-line comment syntaxes. It argues that comments enhance code readability, maintainability, and collaboration, but may impact website performance if not managed properly.

What are CSS Selectors?What are CSS Selectors?Apr 28, 2025 pm 05:26 PM

The article discusses CSS Selectors, their types, and usage for styling HTML elements. It compares ID and class selectors and addresses performance issues with complex selectors.

Which type of CSS holds the highest priority?Which type of CSS holds the highest priority?Apr 28, 2025 pm 05:25 PM

The article discusses CSS priority, focusing on inline styles having the highest specificity. It explains specificity levels, overriding methods, and debugging tools for managing CSS conflicts.

In how many ways can we add CSS to our HTML file?In how many ways can we add CSS to our HTML file?Apr 28, 2025 pm 05:24 PM

Article discusses three methods to add CSS to HTML: inline, internal, and external. Each method's impact on website performance and suitability for beginners is analyzed.(159 characters)

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software