찾다
웹 프론트엔드CSS 튜토리얼Firefox와 IE 브라우저 간 CSS 스타일 시트의 차이점

Firefox ie6 IE7용 CSS 스타일

이제 대부분이 !important로 해킹되었습니다. ie6 및 Firefox 테스트의 경우 정상적으로 표시될 수 있지만 ie7에서는 !important를 올바르게 해석할 수 있습니다. 요청하면 페이지가 표시됩니다! "*+Html"을 사용하는 IE7용 좋은 해킹을 찾았습니다. 이제 IE7에서 찾아보면 문제가 없을 것입니다.

이제 다음과 같이 CSS를 작성하세요.

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

그러면 글꼴 색상은 Firefox에서는 #333, IE6에서는 #666, IE7에서는 #666으로 표시됩니다. 글꼴 색상은 #999로 나타납니다.

2 CSS 레이아웃의 센터링 문제

주요 스타일 정의는 다음과 같습니다.

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

설명:

먼저 TEXT-ALIGN을 정의합니다. 이는 IE의 경우 상위 요소 내의 콘텐츠가 중앙에 있음을 의미합니다. 이 설정이면 충분합니다.

그러나 Mozilla에서는 중앙에 위치할 수 없습니다. 해결책은 하위 요소 정의를 설정할 때 "MARGIN-RIGHT: auto;MARGIN-LEFT: auto; "를 추가하는 것입니다.

이 방법을 사용하여 전체 페이지를 중앙에 맞추려면 각 분할 div에 MARGIN-RIGHT: auto;MARGIN-LEFT: auto;를 정의하는 한 여러 div를 순서대로 분할할 수 있습니다.

상자 모델에 대한 3가지 다른 해석.

#box{
width:600px;
//for ie6.0- width:500px;
//for ff+ ie6.0
}
#box{
width:600px!important
//ff
width:600px;
width /**/:500px;
//ie6.0-
}

4 부동에 의해 생성된 이중 거리 ie

#box{ float:left width: 100px; margin:0 0 100px; 이 경우 IE는 200px 거리를 생성합니다. display:inline; //플로팅 요소 무시}

여기에는 블록과 인라인의 두 요소가 있습니다. 블록 요소의 특징은 다음과 같습니다. 새 줄, 높이, 너비, 줄 높이 및 여백을 모두 제어할 수 있습니다(블록 요소). Inline 요소의 특징은 다음과 같습니다. 다른 요소와 같은 줄에 있으며... 제어할 수 없습니다( Inline 요소). );

#box{ display:block; //인라인 요소를 블록 요소로 시뮬레이션할 수 있음 display:inline; //동일한 행에 정렬되는 효과 달성 diplay:table;

5 IE와 너비 및 높이의 문제

IE는 min-의 정의를 인식하지 못하지만 실제로는 min이 있는 것처럼 일반 너비와 높이를 처리합니다. 이것은 큰 문제입니다. 너비와 높이만 사용하면 이 두 값은 일반 브라우저에서 변경되지 않습니다. min-width와 min-height만 사용하면 너비와 높이가 전혀 설정되지 않습니다. IE에서. 예를 들어 배경 이미지를 설정하려는 경우 이 너비가 더 중요합니다. 이 문제를 해결하려면 다음을 수행하세요.

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

6 페이지의 최소 너비

min-width는 요소가 최소이거나 특정 너비보다 작지 않아야 함을 지정할 수 있는 매우 편리한 CSS 명령입니다. 레이아웃이 항상 올바른지 확인합니다. 하지만 IE는 이를 인식하지 못하고 실제로 너비를 최소 너비로 처리합니다. 이 명령이 IE에서 작동하도록 하려면 태그 아래에
를 넣은 다음 div에 대한 클래스를 지정하면 됩니다.

그런 다음 CSS는 다음과 같이 설계됩니다.

# 컨테이너{

min-width: 600px;
width:e­ 최소 너비는 정상이지만 2행의 너비는 IE에서만 인식되는 javascript를 사용하므로 HTML도 생성됩니다. 덜 형식적인 문서. 실제로 Javascript 판단을 통해 최소 너비를 구현합니다.

7 부동 지우기

.hackbox{

display:table

//블록 요소 수준에서 객체를 테이블로 표시

}


또는

.hackbox{

clear:both;

}

또는 추가: after(의사 객체) 객체 뒤에 발생하는 콘텐츠를 설정하며 일반적으로 함께 사용됩니다. 콘텐츠 포함, IE 이 의사 개체는 Ie 브라우저에서 지원되지 않으며 지원되지 않으므로 IE/WIN 브라우저에 영향을 미치지 않습니다. 이게 제일 귀찮습니다

......#box:after{

content: ".";

display: block;

height: 0;

clear: 모두;
      가시성: 숨김, 오른쪽 개체의 텍스트는 왼쪽에서 3px 간격을 갖습니다.

#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//이 문장이 핵심입니다
}
HTML 코드



>9 속성 선택기(호환 가능한 것으로 간주할 수 없습니다. 숨겨진 CSS의 버그입니다.)
p[id]{}div[id]{}

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

IE6.0 및 그 이하 버전에서는 숨겨져 있습니다.

속성 선택기와 하위 선택기의 범위는 여전히 다릅니다. 예를 들어 p[id]에서는 속성 선택기의 범위가 상대적으로 넓습니다. ], ID가 있는 모든 p 태그는 동일한 스타일입니다.

10 IE 숨기기 문제

div 애플리케이션이 복잡할 때 각 열에 일부 링크가 있으며 숨김 DIV에서는 탐색 문제가 쉽게 발생할 수 있습니다.

일부 콘텐츠를 표시할 수 없습니다. 이 영역을 마우스로 선택하면 해당 콘텐츠가 실제로 페이지에 있는 것으로 확인됩니다.

해결책: #layout에 line-height 속성을 사용하거나 #layout에 고정 높이 및 너비를 사용하세요. 페이지 구조를 최대한 단순하게 유지하세요.


11 높이 부적합

높이 부적합은 내부 객체의 높이가 변경되면 외부 레이어의 높이가 자동으로 조정될 수 없음을 의미합니다. 특히 내부 객체가

여백 또는 여백을 사용하는 경우에는 더욱 그렇습니다. 패디 시간. 예:


p 개체의 콘텐츠


CSS :

#box {Background-color:#eee; } 

#box p {margin-top: 20px; margin-bottom: 20px;

해결책: P 개체 위와 아래에 두 개의 빈 div 개체를 추가합니다(.1{height:0px;overflow:hidden;}). 또는 DIV에 테두리 속성을 추가합니다.

더 많은 관련 글은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 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

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경