찾다
웹 프론트엔드CSS 튜토리얼CSS 해킹은 IE6/IE7/FF_Experience 교환과 CSS의 완벽한 호환성을 달성하는 일반적인 방법입니다.

CSS가 다양한 브라우저와 호환된다는 것은 흔한 문제입니다. 다음 내용은 너무 새로운 것이 아니며 순전히 초보자에게 도움이 되기를 바랍니다. 1. CSS HACK
다음 두 가지 방법으로 오늘날 거의 모든 HACK을 해결할 수 있습니다.

1, !important

IE7의 !important 지원으로 인해 !important 방법은 이제 IE6에서만 사용할 수 있습니다. HACK (작성에 주의하세요. 선언 위치가 미리 나와 있어야 한다는 점을 기억하세요.)
width: 100px!important; */
너비 : 80px; /* IE6 */
}



2, FireFox용 IE6/IE77
*+html 및 *html은 IE 관련 태그이며, Firefox는 현재 이를 지원하지 않습니다. 그리고 *+html은 IE7의 고유 태그입니다.
*+html IE7용 HACK은 HTML 상단에 다음 문을 확인해야 합니다.



2. 범용 float 클로저

clear float의 원리는 [구조적 마크업 없이 float를 지우는 방법]을 참조하세요.
Global CSS에 다음 코드를 추가하고 닫아야 하는 div에 class="clearfix"를 추가하면 항상 작동합니다.


3. 기타 호환성 팁

1. FF 아래의 div에 패딩을 설정하면 너비와 높이가 증가하지만 IE는 그렇지 않습니다. (!important로 해결 가능)
2. Centering 문제
1) line-height를 현재 div와 동일한 높이로 설정한 다음 Vertical-align: middle을 전달합니다. 내용을 감싸지 마세요.)
2) 가로 중심. margin: 0 auto; (물론 만능은 아닙니다.)
3. 표시 설정: block; (내비게이션 태그에서 공통)
4. FF와 IE 사이의 BOX에 대한 이해 차이로 인해 IE에서 float로 설정된 div가 2px 차이가 발생합니다.
5 , ul 태그는 FF 아래에 기본적으로 목록 스타일과 패딩이 있습니다. 불필요한 문제를 피하기 위해 미리 선언하는 것이 가장 좋습니다. (내비게이션 태그 및 콘텐츠 목록에서 흔히 발생함) 6. 외부 래퍼로 설정하지 마세요. div의 높이를 추가하는 것이 가장 좋습니다. 7. 손 커서 관련: 포인터 1 CSS입니다. Firefox ie6 ie7용 스타일 이제 대부분은 해킹에 !important를 사용하고 있으며 ie6 및 firefox에 대한 테스트는 정상적으로 표시될 수 있습니다. 그러나 ie7은 !important를 올바르게 해석할 수 있으므로 페이지가 실패하게 됩니다. 요구! 핀 찾기 IE7에 대한 좋은 해킹은 "*+html"을 사용하는 것입니다. 이제 IE7에서 찾아보면 문제가 없을 것입니다. 이제 다음과 같은 CSS를 작성하세요. #1 { color: #333; } /* Moz */ * html #1 { color: #666 } /* IE6 */ *+html #1 { color: #999; } /* IE7 */ 그러면 글꼴 색상이 Firefox에서는 #333, IE6에서는 #666, IE7에서는 #999로 표시됩니다. 2 CSS 레이아웃의 센터링 문제 주요 스타일 정의는 다음과 같습니다. body {TEXT-ALIGN: center;} #center {MARGIN-RIGHT: auto; MARGIN -LEFT: auto; } 설명: 먼저 상위 요소에 TEXT-ALIGN: center를 정의합니다. 이는 IE의 경우 상위 요소의 콘텐츠가 중앙에 있음을 의미합니다. 그러나 Mozilla에서는 중앙에 위치할 수 없습니다. 해결 방법은 하위 요소 정의를 설정할 때 "MARGIN-RIGHT: auto;MARGIN-LEFT: auto; "를 추가하는 것입니다. 이 방법을 사용하여 전체 페이지를 중앙에 맞추려면 다음을 수행하지 않는 것이 좋습니다. DIV로 설정하려면 여러 div를 순서대로 분할할 수 있습니다. 각 분할 div에 MARGIN-RIGHT: auto;MARGIN-LEFT: auto;를 정의하면 됩니다.

상자 모델의 3가지 다른 해석

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

4 부동으로 생성된 Double ie Distance

#box{ float:left; width:100px; margin:0 0 0 100px; //이 경우 IE는 200px의 거리를 생성합니다. //float를 무시합니다. 🎜 > block과 inline의 두 요소에 대해 자세히 설명하겠습니다. Block 요소의 특징은 다음과 같습니다. 항상 새 줄에서 시작하고 높이, 너비, 줄 높이 및 여백을 모두 제어할 수 있습니다(블록 요소). 인라인 요소의 특징은 다음과 같습니다. 다른 요소가 같은 줄에 있고... 제어할 수 없습니다(인라인 요소).

#box{ display:block; //인라인 요소를 블록 요소로 시뮬레이션할 수 있습니다. display:inline; //같은 결과를 얻음 행 배열 효과 diplay:table

IE는 min-의 정의를 인식하지 못하지만 실제로는 min이 있는 것처럼 일반적인 너비와 높이를 처리합니다. 이는 큰 문제를 야기합니다.
이 두 값은 일반 브라우저에서 변경되지 않습니다. min-width와 min-height만 사용하면 변경되지 않습니다. IE에서 너비와 높이를 높게 설정합니다.
예를 들어 배경 이미지를 설정하려면 이 너비가 더 중요합니다. 이 문제를 해결하려면 다음을 수행하세요.
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: min-height: 35px ;}

6 페이지의 최소 너비

min-width는 요소의 최소 너비가 특정 너비보다 작을 수 없도록 지정할 수 있는 매우 편리한 CSS 명령입니다. 레이아웃은 항상 정확할 수 있습니다. 하지만 IE는 이를 인식하지 못하고
실제로는 너비를 최소 너비로 취급합니다. 이 명령이 IE에서 작동하도록 하려면
태그 아래에

을 넣은 다음 div에 대한 클래스를 지정합니다. 그런 다음 CSS는 다음과 같이 설계됩니다.
#container{ min-width : 600px; width:expression(document.body.clientWidth 첫 번째 최소 너비는 정상이지만 2행의 너비는 Javascript를 사용합니다. 오직 IE만이 이를 인식할 수 있으며 이는 또한 HTML 문서를 덜 형식적이게 만듭니다. 실제로 Javascript 판단을 통해 최소 너비를 구현합니다.
7 부동 소수점 지우기

.hackbox{ display:table; //객체를 블록 요소 수준 테이블로 표시} 또는 .hackbox{clear:both;}
또는 다음을 추가합니다. after(의사 개체)는 일반적으로 콘텐츠와 함께 사용되는 개체 뒤에 발생하는 콘텐츠를 설정합니다. IE는 이 의사 개체를 지원하지 않으며 Ie가 아닌 브라우저에서는 이를 지원합니다.
따라서 IE/WIN 브라우저에는 영향을 미치지 않습니다. . 가장 문제가 되는 점은... #box:after{ content: "."; display: block; height: 0;clear: visible: hide;}

8 DIV float IE 3픽셀 버그

왼쪽 개체는 떠 있고 오른쪽은 외부 패치의 왼쪽 여백을 사용하여 배치됩니다. 오른쪽 개체 내의 텍스트는 왼쪽에서 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]{}
IE6.0 및 아래 버전에서는 숨겨져 있으며 FF 및 OPera에서 사용됩니다.
여전히 차이점이 있습니다. 속성 선택기와 하위 선택기 사이, 하위 선택기 선택기의 범위는 형식적으로 좁고, 속성 선택기의 범위는 상대적으로 넓습니다. 예를 들어 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; text-align:center; }
해결 방법: P 개체 CSS 코드 위와 아래에 2개의 빈 div 개체를 추가하세요. Hidden;} 또는 DIV에 테두리 속성을 추가하세요.
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
利用CSS怎么创建渐变色边框?5种方法分享利用CSS怎么创建渐变色边框?5种方法分享Oct 13, 2021 am 10:19 AM

利用CSS怎么创建渐变色边框?下面本篇文章给大家分享CSS实现渐变色边框的5种方法,希望对大家有所帮助!

css ul标签怎么去掉圆点css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

css与xml的区别是什么css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

css3怎么实现鼠标隐藏效果css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

css怎么实现英文小写转为大写css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

rtl在css是什么意思rtl在css是什么意思Apr 24, 2022 am 11:07 AM

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

css怎么设置i不是斜体css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

怎么设置rotate在css3的旋转中心点怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM

在css3中,可以用“transform-origin”属性设置rotate的旋转中心点,该属性可更改转换元素的位置,第一个参数设置x轴的旋转位置,第二个参数设置y轴旋转位置,语法为“transform-origin:x轴位置 y轴位置”。

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 통합 개발 환경