IE7, FF 및 OP의 부동 CSS를 지우는 가장 좋은 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

IE7, FF 및 OP의 부동 CSS를 지우는 가장 좋은 방법

PHP中文网

May 16, 2016 pm 12:06 PM

클리어 플로트

CSS 포레스트 그룹에서 마진 문제를 논의하던 중 우연히 오버플로를 사용하여 부동 소수점을 삭제할 수 있다는 사실을 발견했습니다. 이 방법은 사용하기 쉬울 뿐만 아니라 FF, OP 및 IE7에서도 지원됩니다. 이제 긴 호환성에 작별 인사를 할 수 있습니다. FF에서 부동 소수점을 지우는 또 다른 잘못된 방법입니다.

방법은 정말 간단합니다. 플로팅해야 하는 라벨에 오버플로 속성을 추가하기만 하면 됩니다.
css 코드

ul {
	list-style: none;
	height: auto;
	margin: 0;
	p adding: 0;
	background-color: #436973;
}
li {
	float: left;
	width: 80px;
	height: 80px;
	background-color: #83B1DF;
}
.demo {
	clear: both;
	border: 1px solid #FF00FF;
	margin-bottom: 5px;
}
.overflow {
	overflow: auto;
	zoom: 1;
	background-color: #43FF73;
}
ul {
	list-style: none;
	height: auto;
	margin: 0;
	padding: 0;
	background-color: #436973;
}
li {
	float: left;
	width: 80px;
	height: 80px;
	background-color: #83B1DF;
}
.demo {
	clear: both;
	border: 1px solid #FF00FF;
	margin-bottom: 5px;
}
.overflow {
	overflow: auto;
	zoom: 1;
	background-color: #43FF73;
}

HTML 코드

<div class="demo">
	<ul class="overflow">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
	</ul>
</div>
<div class="demo">
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
	</ul>
</div>

여기서 Zoom은 IE6용으로 준비되어 있습니다.

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> 
<head> 
<meta http-equiv="pragma" content="no-cache" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="Content-Language" content="utf-8" /> 
<meta name="robots" content="all" /> 
<meta name="author" content="Ghost" /> 
<meta name="Copyright" content="CSSForest" /> 
<meta name="Description" content="CSSɭ" /> 
<meta name="Keywords" content="CSS,web标准,web,Blog,,XHTML,CSSForest,CSS森林" /> 
<title>Overflow hack Demo|www.CSSForest.org</title> 
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" /> 
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> 
<script type="text/javascript">_uacct = "UA-780254-5";urchinTracker();</script> 
<style type="text/css"> 
/*<![CDATA[*/ 
.copyright{position:absolute;bottom:60px;left:10px;width:300px;height:200px;line-height:1.2em;} 
.copyright a:link{color:#666666;text-decoration:none;} 
.copyright a:hover{color:#CC9900;text-decoration:underline;} 

ul{list-style:none;height:auto;margin:0;padding:0;background-color:#436973;} 
li{float:left;width:80px;height:80px;background-color:#83B1DF;} 
.demo{clear:both;border:1px solid #FF00FF;margin-bottom:5px;} 
.overflow{overflow:auto;zoom:1;background-color:#43FF73;} 
/*]]>*/ 
</style> 
</head> 

<body> 
<p></p> 
<div> 
    <ul> 
        <li>1</li> 
        <li>2</li> 
        <li>3</li> 
        <li>4</li> 
        <li>5</li> 
        <li>6</li> 
        <li>7</li> 
        <li>8</li> 
        <li>9</li> 
    </ul> 
</div> 
<div> 
    <ul> 
        <li>1</li> 
        <li>2</li> 
        <li>3</li> 
        <li>4</li> 
        <li>5</li> 
        <li>6</li> 
        <li>7</li> 
        <li>8</li> 
        <li>9</li> 
    </ul> 
</div> 

<div> 
  <div> 
    <div><img src="/static/imghwm/default1.png"  data-src="http://img68.imageshack.us/img68/8708/mylogo9we.gif"  class="lazy"   alt="LOGO" /></div> 
    <div> 
      <p class="fn n"><strong>Ghost</strong> <strong>Zhang</strong></p> 
      <p><strong>Email:</strong><a href="mailto:lovej1bz@gmail.com">lovej1bz@gmail.com</a></p> 
      <p><strong>QQ:</strong><a href="tencent://message/?uin=22168741&Site=webrebuild.org&Menu=yes">22168741</a></p> 
      <p><strong>ORG:</strong><a href="http://www.webrebuild.org">WebReBuild.ORG</a> <a href="http://www.cssforest.org/">www.CSSForest.ORG</a></p> 
      <strong>Blog:</strong><a href="http://forest.blogbus.com" rel="me">http://forest.blogbus.com</a> </div> 
  </div> 
</div> 
</body> 
</html>

참고: 매우 중요한 점을 잊어버렸습니다. 모든 오버플로 속성이 동일한 효과를 갖는 것은 아닙니다. 예를 들어 visible 속성은 IE에서만 작동할 수 있습니다. 예는 여기에서 볼 수 있습니다:

<?xml version="1.0" encoding="utf-8"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">  
<head>  
<meta http-equiv="pragma" content="no-cache" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta http-equiv="Content-Language" content="utf-8" />  
<meta name="robots" content="all" />  
<meta name="author" content="Ghost" />  
<meta name="Copyright" content="CSSForest" />  
<meta name="Description" content="CSSɭ" />  
<meta name="Keywords" content="CSS,web标准,web,Blog,,XHTML,CSSForest,CSS森林" />  
<title>Overflow hack Demo|www.CSSForest.org</title>  
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />  
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>  
<script type="text/javascript">_uacct = "UA-780254-5";urchinTracker();</script>  
<style type="text/css">  
/*<![CDATA[*/  
.copyright{position:absolute;bottom:60px;left:10px;width:300px;height:200px;line-height:1.2em;}  
.copyright a:link{color:#666666;text-decoration:none;}  
.copyright a:hover{color:#CC9900;text-decoration:underline;}  

ul{list-style:none;height:auto;margin:0;padding:0;background-color:#436973;}  
li{float:left;height:80px;margin-right:2px;padding:0 10px;background-color:#83B1DF;line-height:80px;}  
.demo{clear:both;border:1px solid #FF00FF;margin-bottom:5px;}  
.overflow{overflow:auto;zoom:1;background-color:#43FF73;}  
.overflow1{overflow:hidden;zoom:1;background-color:#43FF73;}  
.overflow2{overflow:visible;zoom:1;background-color:#43FF73;}  
/*]]>*/  
</style>  
</head>  

<body>  
<p>overflow的visible属性只对IE起作用，auto/hidden可对FF、OP起作用。</p>  
<div>  
    <ul>  
        <li>overflow:auto;</li>  
        <li>overflow:auto;</li>  
        <li>overflow:auto;</li>  
        <li>overflow:auto;</li>  
        <li>overflow:auto;</li>  
        <li>overflow:auto;</li>  
    </ul>  
</div>  
<div>  
    <ul>  
        <li>overflow:hidden;</li>  
        <li>overflow:hidden;</li>  
        <li>overflow:hidden;</li>  
        <li>overflow:hidden;</li>  
        <li>overflow:hidden;</li>  
        <li>overflow:hidden;</li>  
    </ul>  
</div>  
<div>  
    <ul>  
        <li>overflow:visible;</li>  
        <li>overflow:visible;</li>  
        <li>overflow:visible;</li>  
        <li>overflow:visible;</li>  
        <li>overflow:visible;</li>  
        <li>overflow:visible;</li>  
    </ul>  
</div>  
<div>  
    <ul>  
        <li>no overflow</li>  
        <li>no overflow</li>  
        <li>no overflow</li>  
        <li>no overflow</li>  
        <li>no overflow</li>  
        <li>no overflow</li>  
    </ul>  
</div>  


<div>  
  <div>  
    <div><img src="/static/imghwm/default1.png"  data-src="http://img68.imageshack.us/img68/8708/mylogo9we.gif"  class="lazy"   alt="LOGO" /></div>  
    <div>  
      <p class="fn n"><strong>Ghost</strong> <strong>Zhang</strong></p>  
      <p><strong>Email:</strong><a href="mailto:lovej1bz@gmail.com">lovej1bz@gmail.com</a></p>  
      <p><strong>QQ:</strong><a href="tencent://message/?uin=22168741&Site=webrebuild.org&Menu=yes">22168741</a></p>  
      <p><strong>ORG:</strong><a href="http://www.webrebuild.org">WebReBuild.ORG</a> <a href="http://www.cssforest.org/">www.CSSForest.ORG</a></p>  
      <strong>Blog:</strong><a href="http://forest.blogbus.com" rel="me">http://forest.blogbus.com</a> </div>  
  </div>  
</div>  
</body>  
</html>

이 경우 문제가 있습니다. 높이가 있고 콘텐츠가 높이를 초과하는 경우 자동 또는 숨김을 정의하면 원치 않는 효과가 발생할 수 있습니다. 나타나다. 해결책은 다음과 같습니다. IE6 이하에서는 높이를 직접 정의할 수 있으며, IE7, FF 및 OP에서는 최소 높이를 정의할 수 있습니다.

CSS 코드:

overflow   
{   
height:auto;   
_height:200px;   
min-height:200px;   
verflow:auto;   
zoom:1;   
_overflow:visible;   
}

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

Atom Editor Mac 버전 다운로드

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

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

mPDF

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