태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

IE6,IE7 ,FireFox 에 대해 CSS 맞추기

12년 전

IE7 의 렌더링 방식이 IE6과 다르다.
CSS testing of Selector and Pseudo selectors 를 보면 IE7 은 FF 에 더 가까와 지고 있다.
그래서 바야흐로 브라우저 3개를 켜고 코딩을 해야하는 시대가 온 것이다.

이를 해결하기 위한 방법 중 하나는 Selector Hack 을 이용하는 것이다.

.context_bar_form_field
{
height: 15px; // 모든 브라우저
#height: 15px; // IE 전용
_height: 21px; // IE6.0 과 이전버젼용
}

우선 파폭에 맞추어 개발을 한 후 E7 에서 점검한다. 수정할 부분이 있다면 # 접두어를 붙여 수정해 준다. #이 붙은 것은 FF 에서 무시한다. 하지만 IE 는 재설정 해준다.
다음에 IE6 을 열고 수정하면서 _ 를 접두어로 붙여 새로 재설정 한다. IE7 은 '-' 가 붙은 것을 무시한다.

또 다른 방법은,

.title h3 {height: 21px; }
.title > h3 {height: auto; min-height: 21px; }

이렇게 하는 방법도있다. 맨 아래줄은 파이어폭스와 IE7만 적용된다.

한가지 주의할 점은

body
{
text-align:-moz-center; /*FF*/
#text-align:center; /*IE */
}
속성 키워드 자체가 다른 것이 많다. 주의 할 것!

위에서 처럼 속성값 자체가 다른 경우가 있다. 그러니 안된다고 hack 만 쳐다보고 있으면 밤세야 한다.

내가 보기에 가장 좋은 방법은 Conditional Comments 를 사용하는 것이다.
복잡하게 한 파일에 구질구질 작성하지 말고 파일을 분리해 버리는 것이다.

참고 :http://webborg.blogspot.com/2007/01/css-compatibility-ie6-ie7-firefox-and.html

<head>
<title>my css hacked page</title>
<link rel="stylesheet" type="text/css" href="styles.css" />

<body>
<div class="watermark">....</div>...

이렇게 분리해서 각개격파하는 것이 좋을 듯 싶다.

E 용인 expression을 사용하여 본다면
a { expression(어쩌구 문법) }
이렇게 해서 a 태그 즉, 링크에 걸린 항목에 대하여 expression은 적용 시킬 수 있을것입니다.
그럼 예로.. 링크주소중에 pdf 라은 확장자가 있다면 링크 앞에 자동으로 PDF 아이콘을 띄워봅시다.

a {
   padding-left: expression(this.href.indexOf('.pdf') > 0 ? '20px' : '');
   background: expression(this.href.indexOf('.pdf')>0 ? 'transparent url(pdf.gif) no-repeat center left' : '');
}

이건 IE 용입니다. Firefox에선 이렇게 하시면 됩니다.

a[href $='.pdf']{
   padding-left: 20px;
   background: transparent url(pdf.gif) no-repeat center left;
}
음... 불여시에서 사용하는게 훨씬 간편하네요 @@;;
[href $='.pdf'] 이 구문에서 $는 .pdf로 끝나는 것을 의미합니다.
.pdf로 시작하는 것을 찾으려면 $대신에 ^을 사용하시면 됩니다.
[href ^='.pdf']가 되겠죠. 그냥 포함 되어 있는지를 찾는 거라면 *을 사용하시면 됩니다.

<style>
a[href $='.pdf']{
   padding-left: 20px;
   background: transparent url(pdf.gif) no-repeat center left;
}

a {
   padding-left: expression(this.href.indexOf('.pdf') > 0 ? '20px' : '');
   background: expression(this.href.indexOf('.pdf')>0 ? 'transparent url(pdf.gif) no-repeat center left' : '');
}
</style>
<a href="test.pdf">test1</a><br/>
<a href="test.gif">test2</a>

추천 목록

번호	제목
275	자바스크립트 XHTML DTD STRICT 유효성에 통과하기
274	크로스브라우징 input 박스
	IE6,IE7 ,FireFox 에 대해 CSS 맞추기
272	IE 조건부 주석의 적절한 사용법
271	웹표준 준수사항 22가지
270	internet Explorer8 에서 기존 사이트를 정상적으로 나오게 하는 메타태그
269	각 HTML버전별 DTD(Document Type Definition)
268	XHTML1.1 에서 일반적으로 범하기 쉬운 오류
267	웹표준에서 더이상 사용할수 없는 태그&속성
266	웹표준 모든 애트리뷰트에는 값이 필요
265	웹표준으로 퍼블리싱할때 꼭 지켜야 할 사항들
264	평 => m2
263	평수 구하기 (가로 x 세로)
262	제이쿼리 탭메뉴
261	HTML5 elements
260	[MySQL]UNION과 UNION ALL 의 차이 및 주의 사항
259	[MySQL] Union 사용법. 여러 테이블의 같은 값을 한번 쿼리로 추출하기
258	ie6 css 롤링 이미지 깜빡임 문제 해결법
257	div 마지막 내용 복제/반복 현상(Duplicate Characters Bug)
256	셀렉트박스를 div+css 로 변경하기
255	파일첨부를 div+css 로 변경하기
254	페이징 네이버 스타일 따라하기
253	마우스오버 롤링이미지를 jQuery로 변경하기
252	css background sprites
251	Jquery 모음
250	배경이미지 제어하기(고정하기)
249	글자 줄바꿈과 줄바꿈 금지
248	텍스트 overflow
247	border-style속성의 값
246	Input 박스에 포커스 되었을때 스타일 변경