CSS 버그 솔루션 및 기술 12가 가장 일반적으로 사용 되

출처: 인터넷
작성자: 사용자
키워드: 웹 페이지 제작 CSS 자습서

CSS 버그 솔루션 및 기술 12가 가장 일반적으로 사용 되
하나, 브라우저 전용 선택기

이 선택기는 특정 브라우저에 대 한 CSS 디자인을 할 때 유용할 것 이다.

I e 6와 그것의 더 낮은 버전

* HTML {}

I e 7와 그것의 더 낮은 버전

*: 첫 번째 아이 + html {} * HTML {}

I e 7만

*: 첫 번째 아이 + html {}

I e 7와 현대 브라우저

html > {바디

현대 브라우저 (IE7 적용 되지 않음)

html > / * * / {바디

OPERA9 및 그것의 낮은 버전

Html:first-아이 {}

사파리

Html [xmlns * = ""] 몸: 마지막-자식 {}

이러한 선택기를 사용 하려면 스타일을 하기 전에 그들을 놓습니다. 예를 들어:

예제 소스 코드

#content-박스 없음

너비: 300px;

높이: 150px;

}


예제 소스 코드

* HTML #content-박스 없음

폭: 250px;

}

둘째, IE6 투명 PNG를 지원 하자

I e 6의 버그는 큰 문제를 야기 하 고 그 투명 한 PNG 그림을 지원 하지 않았다.

CSS 필터를 사용 해야

예제 소스 코드

* html #image-스타일 없음

배경-이미지: 없음;

Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src = "fil

Ename.png ", sizingmethod"규모"=);

}

셋째, 하이퍼링크 점선 제거

파이어 폭스, 하이퍼링크를 클릭 하면 점선된 개요는 둘레의 주위에 나타납니다. 이것은 쉽게 해결 하기 위해 그냥 태그 스타일에 추가 하려면:이 문서 52css.com 데이터 정렬에 의해 기입 하시기 바랍니다 소스 지정!

예제 소스 코드

개요: 없음.

없음

개요: 없음;

}


라인에는 요소의 너비를 정의

인라인 요소의 너비를 정의 하는 경우만 i e 6에서 유효 하다. 모든 HTML 요소에는 인라인 요소 또는 좋은 블록 요소입니다. 인라인 요소 포함: < 스팬 >, < a >, < 강한 >와 < em > 블록 요소 포함 < div & gt, < p & gt, < h1 & gt, < 양식 >과 < 리 >. 문제를 해결 하기 위해 블록 요소를 인라인 요소를 변경할 수 있습니다 인라인 요소의 너비를 정의할 수 없습니다.

예제 소스 코드

스팬 {폭: 150px; 디스플레이: 블록}

센터는 고정폭 페이지

페이지는 브라우저에서 가운데를 위해서, 상대적으로, 외부 div를 해야 자동 여백 설정.

예제 소스 코드

#wrapper 없음

여백: 자동;

위치: 상대;

}

6, 6으로 더블 마진 버그

 

모델 상자에서 버그에 일반 솔루션

 

8 두 레이어 사이의 3px 간격

IE에서 Ix. HTML 주석 텍스트의 복사 하는 이상한 원인


X. 그림 대체 기술

헤드 라인을 만들어 그림을 이용 하기 보다는 텍스트를 사용 하는 것이 낫다. 텍스트는 화면 판독기 및 SEO 친절 한 매우.

예제 소스 코드

HTML:

< h1 >< 스팬 > 주 하나를 향하고 < / 범위 >< / h1 >

CSS는:

H1 {배경: url (제목-image.gif) 아니오-반복;}

H1 범위 없음

위치: 절대;

텍스트-들여쓰기:-5000px;

}

우리가 제목에 대 한 표준 < h1 > 라벨을 사용 하 고 CSS를 사용 하 여 텍스트를 대체할 그림을 볼 수 있습니다. 텍스트-들여쓰기 속성 텍스트 뷰어에 표시 되지 않으면 브라우저의 왼쪽에 5000px에 올려놓습니다.

CSS 및 설정를 참조 하십시오 무슨는 머리 모습 처럼.이 문서 52css.com에 의해, 무단 전재, 소스를 지정 하시기 바랍니다!

Xi. 최소 폭

6으로 다른 버그는 분 폭 속성을 지원 하지 않습니다. 최소 폭은 매우 유용 하다, 특히 템플릿용으로 탄력, 100%의 너비는 또한 분 폭 브라우저를 말할 수 있는 너비를 다시 압축 하지 않을 때.

모든 브라우저 i e 6을 제외 하 고만 하면 분-폭: xpx; 예를 들어:

예제 소스 코드

. 컨테이너 없음

분-너비: 300px;

}

우리는 i e 6에서 작동 하도록 그를 얻기 위해 약간의 추가 작업이 필요 합니다. 처음에 우리 두 Div 포함 하는 다른 하나를 만들어야 합니다.

예제 소스 코드

< div class = "컨테이너" >

< div 클래스 "홀더" = > 콘텐츠 < / div >

< / div >

다음 외부 Div, 52css.com 데이터 정렬에 의해이 문서의 최소 너비 특성을 정의 하는 데 필요한 소스를 지정 하십시오 무단 전재!

예제 소스 코드

. 컨테이너 없음

분-너비: 300px;

}

IE 해킹에 대 한 시간입니다. 다음 코드를 포함 해야 합니다.

예제 소스 코드

* HTML. 콘테이너 없음

국경-오른쪽: 300px 단단한 #FFF;

}

* HTML. 홀더 없음

디스플레이: 인라인-블록;

위치: 상대;

여백-오른쪽:-300px;

}

브라우저 창 크기를 조정으로 외부 div 너비 테두리 폭을 축소 될 때까지 맞게 감소 그것은 더 이상 어떤을 축소 하지 않습니다. 홀더 양복과 또한 중지 축소 Div 다음과 같습니다. 외부 div 테두리 너비가 된다 내부 div의 최소 폭

12. 가로 스크롤 막대 숨기기

가로 스크롤 막대를 방지 하려면 추가 오버플로-x: 본문에 숨겨진.

예제 소스 코드

몸 {오버플로우: 숨겨진;}

이 기술은 그림 또는 브라우저 창 보다 큰 플래시를 사용 하려는 경우 유용 합니다.

관련 문서

연락처

이 페이지의 내용은 인터넷에서 가져온 것이므로 Alibaba Cloud의 공식 의견이 아닙니다.이 페이지에서 언급 된 제품 및 서비스는 Alibaba Cloud와는 관련이 없으므로이 페이지의 내용이 골칫거리 인 경우 저희에게 알려주십시오. 우리는 5 일 근무일 이내에 이메일을 처리 할 것입니다.

커뮤니티에서 표절 사례를 발견한 경우 info-contact@alibabacloud.com 으로 관련 증거를 첨부하여 이메일을 보내주시기 바랍니다. 당사 직원이 영업일 기준 5일 내에 연락 드리도록 하겠습니다.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.