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
Ubuntu Linux中如何删除Firefox Snap?Ubuntu Linux中如何删除Firefox Snap?Feb 21, 2024 pm 07:00 PM

要在UbuntuLinux中删除FirefoxSnap,可以按照以下步骤进行操作:打开终端并以管理员身份登录到Ubuntu系统。运行以下命令以卸载FirefoxSnap:sudosnapremovefirefox系统将提示你输入管理员密码。输入密码并按下Enter键以确认。等待命令执行完成。一旦完成,FirefoxSnap将被完全删除。请注意,这将删除通过Snap包管理器安装的Firefox版本。如果你通过其他方式(如APT包管理器)安装了另一个版本的Firefox,则不会受到影响。通过以上步骤

SpringBoot与SpringMVC的比较及差别分析SpringBoot与SpringMVC的比较及差别分析Dec 29, 2023 am 11:02 AM

SpringBoot和SpringMVC都是Java开发中常用的框架,但它们之间有一些明显的差异。本文将探究这两个框架的特点和用途,并对它们的差异进行比较。首先,我们来了解一下SpringBoot。SpringBoot是由Pivotal团队开发的,它旨在简化基于Spring框架的应用程序的创建和部署。它提供了一种快速、轻量级的方式来构建独立的、可执行

Oracle11g和Oracle12c版本差异解读Oracle11g和Oracle12c版本差异解读Mar 07, 2024 pm 02:30 PM

Oracle数据库一直是企业级数据库管理系统的领导者之一,其不断更新迭代的版本也引起了广泛关注。其中,Oracle11g和Oracle12c两个版本作为比较具有代表性的版本,有着许多的差异。本文将针对Oracle11g和Oracle12c的一些重要差异做一些解读,并附上具体的代码示例,帮助读者更深入地了解这两个版本的区别。一、架构差异Oracle1

如何使用HTML和CSS创建一个幻灯片布局页面如何使用HTML和CSS创建一个幻灯片布局页面Oct 16, 2023 am 09:07 AM

如何使用HTML和CSS创建一个幻灯片布局页面引言:幻灯片布局在现代web设计中被广泛使用,在展示信息或图片时具有很大的吸引力和交互性。本文将介绍如何使用HTML和CSS创建一个幻灯片布局页面,并提供具体的代码示例。一、HTML布局结构首先,我们需要创建一个HTML布局结构,包含一个幻灯片容器和多个幻灯片项。代码如下所示:<!DOCTYPEhtml&

mozilla firefox可以卸载吗mozilla firefox可以卸载吗Mar 15, 2023 pm 04:40 PM

mozilla firefox可以卸载;firefox属于第三方浏览器,如果不需要,完全可以卸载。卸载方法:1、在开始菜单中,依次点击“Windwos系统”-“控制面板”;2、在“控制面板”界面中,点击“程序和功能”;3、在新界面中,找到并双击火狐浏览器图标;4、在卸载弹窗中,点击“下一步”;5、点击“卸载”即可。

如何使用:nth-child(-n+5)伪类选择器选择位置小于等于5的子元素的CSS样式如何使用:nth-child(-n+5)伪类选择器选择位置小于等于5的子元素的CSS样式Nov 20, 2023 am 11:52 AM

如何使用:nth-child(-n+5)伪类选择器选择位置小于等于5的子元素的CSS样式在CSS中,伪类选择器是一种强大的工具,可以通过特定的选择方式来选取HTML文档中的某些元素。其中,:nth-child()是一种常用的伪类选择器,可以选择特定位置的子元素。:nth-child(n)可以匹配HTML中的第n个子元素,而:nth-child(-n)可以匹配

火狐浏览器Firefox 113 新特性:支持AV1动图、增强密码生成器和画中画特性火狐浏览器Firefox 113 新特性:支持AV1动图、增强密码生成器和画中画特性Mar 05, 2024 pm 05:20 PM

近日消息,Mozilla在发布Firefox112稳定版的同时,也宣布下个主要版本Firefox113进入Beta频道,支持AV1动图、增强密码生成器和画中画特性。火狐浏览器Firefox113主要新功能/新特性如下支持AV1格式动图(AVIS)通过引入特殊字符来增强密码生成器的安全性增强画中画功能,支持后退、显示视频时间,能更轻松地启用全屏模式为Debian和Ubuntu发行版提供官方DEB安装文件更新书签导入功能,默认情况下支持导入书签的图标在支持的硬件上默认启用硬件加速AV1视频解码使用w

如何使用HTML和CSS实现一个简单的聊天页面布局如何使用HTML和CSS实现一个简单的聊天页面布局Oct 18, 2023 am 08:42 AM

如何使用HTML和CSS实现一个简单的聊天页面布局随着现代科技的发展,人们越来越依赖于互联网来进行沟通和交流。而在网页中,聊天页面是一种非常常见的布局需求。本文将向大家介绍如何使用HTML和CSS来实现一个简单的聊天页面布局,并给出具体的代码示例。首先,我们需要创建一个HTML文件,可以使用任何文本编辑器。以index.html为例,先创建一个基本的HTML

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

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

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

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment