Internet Explorer에서 DIV를 위해 일할 수있는 플로트 왼쪽/오른쪽을 얻을 수 없습니다.

StackOverflow https://stackoverflow.com/questions/1443007

문제

HTML은 다음과 같습니다.

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <title></title>
  </head>
  <body>
    <div align="center">
      <div id="main-header-content" class="content">
        <div class="left">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
          euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 
          minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 
          aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in 
          vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla 
          facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
          luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber 
          tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod 
          mazim placerat facer possim assum.
        </div>
        <div class="right">
          <div class="left">
            <img src="http://www.mywebk9.com/images/question.png" alt="Questions"/>
          </div>
          <div class="right">
            <span class="small-text">Lorem ipsum dolor sit amet</span>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

및 Styles.css :

*
{
  margin: 0;
  padding: 0;
}
body
{
  font-family: Verdana;
  font-size: 8pt;
}
div.content
{
  width: 585px;
}
div#header-content div
{
  padding: 20px;
  text-align: justify;
}
div#main-header-content > div.left
{
  padding-left: 40px;
  padding-right: 7px;
  text-align: justify;
  width: 350px;
}
div#main-header-content > div.right
{
  padding-left: 7px;
  padding-right: 15px;
  width: 165px;
}
div#main-header-content div.right div.left
{
  width: 20px;
}
div#main-header-content div.right div.right
{
  text-align: left;
  width: 142px;
}
div.left
{
  float: left;
}
div.right
{
  float: right;
}
.small-text
{
  font-size: smaller;
}

이것은 FF와 Chrome에서 잘 작동합니다. 텍스트가있는 두 개의 열과 아이콘과 소량의 텍스트가있는 두 열이어야합니다. IE 에서이 작업을 어떻게 만들 수 있습니까? 나는 div clear = 두 가지를 시도했지만 아무것도하지 않습니다.

또한 FF, Chrome 및 IE> = 7에서 작동하는 페이지를 작성하고 스타일을 사용하는 방법에 대한 몇 가지 팁을 제공 할 수있는 사람을위한 업벤트.

도움이 되었습니까?

해결책

DocType 및 IE를 정의하지 않기 때문에 QuirksMode에서 페이지를 표준 모드 (또는 거의 표준)로보고 있기 때문일 수 있습니다.

자세한 내용은이 기사를 읽으십시오.

http://www.quirksmode.org/css/quirksmode.html

표준 모드에서 귀하의 사이트를 확인했으며 IE7에서 2 열은 (FF & Chrome에서와 같이) 동작합니다.

다른 팁

실제로 어떤 것이 도움이 될지 확실하지 않지만 몇 가지를 제안 할 수 있습니다.

  1. 문서에 DocType (예 : 전환 HTML 4.01)를 넣으십시오. 이것은 완곡 된 "기발한"모드보다는 소위 "표준 준수"모드를 강요한다.
  2. 그런 왼쪽 및 오른쪽 클래스를 재사용하지 마십시오. IE7+에 불과한 어린이 선택기를 사용하도록 강요하고 필요하지 않습니다.
  3. DIV에 플로트가없는 경우 높이가 0입니다. "Clear : On On On"또는 "Overflow : Hidden"으로 "Clear : On Overflow : Hidden"으로 0 높이 DIV를 넣어서이를 해결할 수 있습니다.
  4. Align = "Center"를 제거하십시오. 그것은 표준이 아닙니다.

다음은 다음을 고려해야 할 골격입니다.

<div id="container">
  <div id="left">Text</div>
  <div id="right">
    <div id="icon">(image)</div>
    <div id="text">(text)</div>
  </div>
</div>

결합 :

html, body, div { padding: 0; margin: 0; border: 0 none; } /* or a proper reset CSS */
#container { margin: 0 auto; width: 585px; overflow: hidden; } /* center */
#left { text-align: justify; width: 350px; float: left; }
#right { width: 235px; float: right; overflow: hidden; }
#icon { float: left; width: 20px; }
#text { float: right; width: 142px; }

등등.

먼저 나는 모두 건너 뛰었습니다 

div#main-header-content > div.left

그리고 대체하십시오 

div#main-header-content div.left

그들이 IE6에서 작동하지 않기 때문에.

둘째, 나는 사용할 것이다 

div.right {
    float: left;
}

그리고 추가로, 나는 확실히 건너 뛸 것입니다 <div align="center">...</div>, 비가 감가 상승합니다. 대신 나는 Div.Content를 재정렬 할 것이다 

div.content {
    position: relative;
    width: 585px;
    margin-left: -292px
    left: 50%;
}

중앙에 대한 트릭은 (위치 사용 : 상대 또는 위치 : 절대) 왼쪽 지점을 너비의 절반으로 설정 한 다음 마진을 요소 너비의 절반으로 다시 이동시키는 것입니다 (여기서 '요소'는 원하는 요소입니다. 센터).

수정 된 CS

div#main-header-content  div.left
    {
      padding-left: 40px;
      padding-right: 7px;
      text-align: justify;
      width: 350px;
    }
    div#main-header-content  div.right
    {
      padding-left: 7px;
      padding-right: 15px;
      width: 165px;
    }

이 클래스의 CSS 대신 u는 IE와 Firefox에서도 잘 작동합니다 ..

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top