Divs는 Internet Explorer에서 작동하지만 Chrome에서는 작동하지 않습니다.

Google 크롬의 내 스타일링이 의도 한대로 잘 작동하지 않는 것 같습니다 (link). 그것은 8Divs는 Internet Explorer에서 작동하지만 Chrome에서는 작동하지 않습니다.

가 여기에 스타일 시트의 인터넷 익스플로러에서 잘 작동합니다 :

@charset "utf-8"; 
/* Stylesheet for Northview Game Tickets */ 

#mainwrapper { 
    width:18cm; 
    height:25cm; 
    background-color:#0F0; 
} 

#title { 
    width:680px; 
    height:117px; 
    /*background-image:url(http://nhswag.com/tickets/images/title.png);*/ 
    background-color:#183f61; 
} 

#title-img { 
    width:680px; 
    height:117px; 
} 

#sportimage { 
    width:680px; 
    height:302px; 
    background-image:url(http://nhswag.com/tickets/images/sportimg.png); 
} 

#instructionstitle { 
    width:340px; 
    height:57px; 
    float:left; 
    padding-top:15px; 
    /*background-color:#353435;*/ 
    background-color:#183f61; 
    vertical-align:text-bottom; 
    color:#FFFFFF; 
} 

#instructions { 
    width:340px; 
    height:416px; 
    float:left; 
    text-align:left; 
    padding-top:15px; 
    /*background-color:#8B8B8B;*/ 
    /*background-color:#003;*/ 
    background-color:#F2EEEA; 
} 

#ticketinfo { 
    width:170px; 
    height:189px; 
    float:right; 
    text-align:left; 
    padding-top: 15px; 
    padding-left: 15px; 
    /*background-color:#767676;*//*#633;*/ 
    background-color:#d9d5d2; 
} 

#barcodewrapper { 
    width:170px; 
    height:189px; 
    float:right; 
    padding-top:44px; 
    /*background-color:#767676;*//*#FFF;*/ 
    background-color:#d9d5d2; 
} 

#barcode { 
    border-width:thick; 
    border-color:#000; 
} 

#adspace { 
    width:340px; 
    height:284px; 
    float:right; 
    padding-top:10px; 
    background-image:url(http://nhswag.com/tickets/images/ad.png); 
} 

#copyrightwrapper { 
    width:680px; 
    height:57px; 
    padding-top:25px; 
    background-color:#183f61; 
    font-size:12px; 
    color:#FFFFFF; 
}

어떤 스타일 옵션 불일치의 원인이 될 수있다?

편집 :

페이지 소스 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<link rel="stylesheet" type="text/css" href="ticketstyle.css" /> 
<title>NHSWAG Game Ticket</title> 
</head> 

<?php 
    /* 
    Required Fields: 
    1) name 
    2) type (adult/student/child) 
    3) price 
    4) barcodeid 

    ex: http://nhswag.com/tickets/ticketprint.php?name=John%20Smith&type=Adult&price=4.98&barcodeid=9780618503049 
    */ 

    function google_qr($url,$size ='150',$EC_level='L',$margin='0') { 
     $url = urlencode($url); 
     echo '<img id="barcode" src="http://chart.apis.google.com/chart?chs='.$size.'x'.$size.'&cht=qr&chld='.$EC_level.'|'.$margin.'&chl='.$url.'" alt="QR code" width="'.$size.'" height="'.$size.'"/>'; 
    } 
?> 

<body style="background-color:#b0b0b0"> 
<center> 
<div id="mainwrapper"> 

    <div id="title"> 
    </div> 


    <div id="sportimage"> 
     sportimage 
    </div> 


    <div id="instructionstitle"> 
    Instructions</div> 


    <div id="ticketinfo"> 
     <strong>Ticket Details:</strong><br><br> 
     Name:<br> 
     &nbsp;&nbsp;&nbsp;<?php echo $_GET["name"]; ?><br> 
     Type:<br> 
     &nbsp;&nbsp;&nbsp;<?php echo $_GET["type"]; ?><br> 
     Price:<br> 
     &nbsp;&nbsp;&nbsp;$<?php echo $_GET["price"]; ?> 
    </div> 


    <div id="barcodewrapper"> 
     <center> 
      <div id="barcode"> 
       <?php google_qr('http://www.nhswag.com/tickets/check/ticketcheck.php?barcodeid='.$_GET["barcodeid"],100); ?> 
       <?php // echo md5("JustianMeyerNorthview Gwinett Football"); ?> 
      </div> 
     </center> 
    </div> 


    <div id="instructions"> 
     <ol> 
      <li>Print this ticket and keep it for your records.</li> 
      <li>Present this ticket at the entrance of your <strong>Northview High School</strong> sponsored event.</li> 
      <li>Enjoy! Ask the ticket manager for seating.</li> 
     </ol> 
    </div> 


    <div id="adspace"> 
     <p>Advertisement</p> 
     <p>&nbsp;</p> 
    </div> 
    <div id="copyrightwrapper"> 
     Copyright &copy; NHSwag Team, 2011 
    </div> 

</div> 
</center> 
</body> 
</html>

출처

2011-01-30 Justian Meyer

div를 불필요한 패딩의 탑을 제거 (http://stackoverflow.com/questions/4844324/divs-working-in-internet-explorer- [한다.] but-not-in-chrome) –

@Matti : 이미 div를 사용하고 있습니다. –

@Justian : 그 주석의 영리한 하위 텍스트는 레이아웃 "divs"에 대해 CSS를 사용하여 호출하는 이상한 습관을 가리 킵니다. –

페이지가 IE8에 Quirks mode에 렌더링된다

쿼크 모드는 렌더링 모드가 일부 웹 브라우저 을 사용하다 의 하위 호환성을 유지하기 위해 웹 이전 브라우저 용으로 설계되었거나 표준없이 코딩 된 페이지 적합성.

IE Quirks 모드에서 작동하도록 만들어진 페이지가 다른 브라우저에서도 작동하기를 기대할 수는 없습니다. 여기에서와 같이 거의 항상 그렇지 않을 수 있습니다.

따라서 doctype (첫 번째 줄)을 <!DOCTYPE html>으로 변경하여 Quirks 모드에서 빠져 나와 거기에서 (수많은) 문제를 해결해야합니다.

에 대한 조언이 더 필요하면이 올바른 doctype으로 작동하도록 HTML/CSS를 수정하는 방법을 알려주세요. 자세한 방법을 알려 드리겠습니다.

IE7/8, Firefox, Chrome에서이를 테스트했습니다. 일관되게 렌더링됩니다.

가능한 한 많은 HTML/CSS를 유지하려고했습니다. 내가 그랬기 때문에 코드가 더 우아 할 수도 있지만 작동합니다!

테스트하기 쉽도록 상단에 모든 스타일을 추가했습니다. 스타일 시트에 넣어야합니다.

적절한 경우 PHP에 다시 추가해야합니다. 나는 현재의 한 해를 출력하기 위해 작은 PHP 스 니펫을 추가했습니다.

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>NHSWAG Game Ticket</title> 
<style type="text/css"> 
html, body { 
    margin: 0; 
    padding: 0; 
    border: 0 
} 
body { 
    background: #b0b0b0; 
    padding: 5px 
} 

#mainwrapper { 
    width: 680px; 
    margin: 0 auto 
} 

#title { 
    height: 117px; 
    /*background-image:url(http://nhswag.com/tickets/images/title.png);*/ 
    background-color: #183f61; 
} 
#sportimage { 
    height: 302px; 
    background-image: url(http://nhswag.com/tickets/images/sportimg.png); 
} 

#floatContainer { 
    background: #f2eeea; 
    overflow: auto 
} 
#left { 
    float: left; 
    width: 50% 
} 
#right { 
    float: right; 
    width: 50% 
} 

#instructionstitle { 
    height: 32px; 
    padding-top: 12px; 
    /*background-color: #353435;*/ 
    background-color: #183f61; 
    vertical-align: text-bottom; 
    color: #fff; 
    text-align: center 
} 

#barcodewrapper { 
    overflow: auto; 
    background: #d9d5d2 
} 
#barcode { 
    float: left; 
    padding: 20px 
} 
#ticketinfo { 
    float: left; 
    padding: 16px 0 
} 
#ticketinfo dd { 
    margin-left: 12px 
} 
#ticketinfo dl { 
    margin: 0 
} 

#copyrightwrapper { 
    height: 35px; 
    padding-top: 22px; 
    background-color: #183f61; 
    font-size: 12px; 
    color: #fff; 
    text-align: center 
} 
#adspace { 
    height: 284px; 
    background: #fff; 
    text-align: center; 
    background:url(http://nhswag.com/tickets/images/ad.png) no-repeat 
} 
#adspace p { 
    margin: 0; 
    padding: 12px 0 
} 
</style> 
</head> 

<body> 

<div id="mainwrapper"> 
    <div id="title">title</div> 
    <div id="sportimage">sportimage</div> 

    <div id="floatContainer"> 
     <div id="left"> 
      <div id="instructionstitle"> Instructions </div> 
      <div id="instructions"> 
       <ol> 
        <li>Print this ticket and keep it for your records.</li> 
        <li>Present this ticket at the entrance of your <strong>Northview High School</strong> sponsored event.</li> 
        <li>Enjoy! Ask the ticket manager for seating.</li> 
       </ol> 
      </div> 
     </div> 

     <div id="right"> 
     <div id="barcodewrapper"> 
      <div id="barcode"> <img id="barcode" src="http://chart.apis.google.com/chart?chs=100x100&cht=qr&chld=L|0&chl=http%3A%2F%2Fwww.nhswag.com%2Ftickets%2Fcheck%2Fticketcheck.php%3Fbarcodeid%3D" alt="QR code" width="100" height="100"/> </div> 
      <div id="ticketinfo"> <strong>Ticket Details:</strong><br> 
       <br> 
       <dl> 
        <dt>Name:</dt> 
         <dd>John Smith</dd> 
        <dt>Type:</dt> 
         <dd>Student</dd> 
        <dt>Price:</dt> 
         <dd>$5</dd> 
       </dl> 
       </div> 
      </div> 
      <div id="adspace"> 
       <p>Advertisement</p> 
       <p>&nbsp;</p> 
      </div> 
     </div> 
    </div> 

    <div id="copyrightwrapper"> Copyright &copy; NHSwag Team, <?php echo date('Y') ?></div> 
</div> 

</body> 
</html>

출처

2011-01-30 17:34:51 thirtydot

여분의 조언이 확실히 도움이 될 것입니다. –

수정하는 것보다 처음부터 코드를 작성하는 것이 더 빠를 것입니다. – thirtydot

물론 :). 나는 내가 잘못하고있는 것을보기 위해 출처를 점검 할 수 있었다. 만약 유용하다면 전체 페이지 소스를 추가 할 것입니다. –

이 때문에 IE의 기본 box-sizing의의 (BTW, 비 W3C 준수하고, 제대로 작동하고 크롬의)가 쿼크 모드에있을 때.

#ticketinfo { 
    width:170px; 
    height:189px; 
    float:right; 
    text-align:left; 
    padding-top: 15px; 
    /*padding-left: 15px;*/ 
    /*background-color:#767676;*//*#633;*/ 
    background-color:#d9d5d2; 
}

IE에서 요소의 폭이 크롬에, 170px입니다 : 170px + 15 픽셀 패딩

이보십시오.

하지만 정말로해야 할 일은 올바른 doctype을 사용하는 것입니다.

출처

2011-01-30 17:37:05 mingos

ie와 chrome/firefox/opera (w3c) 사이의 다른 블록 모델 구현으로 인해 문제가 발생합니다. 이제 ie9가 이미 표준을 준수합니다. 나는 IE8과 크롬으로 테스트했다. 단순 수정 :

#copyrightwrapper { 
    width: 680px; 
    height: 57px; 
    padding-top: 25px; 
    background-color: #183F61; 
    font-size: 12px; 
    color: white; 
    clear: both; /*add this to make sure footer is in the bottom as u use float before*/ 
}

후 다른 플로트 DIV에서

출처

2011-01-30 17:41:14

Divs는 Internet Explorer에서 작동하지만 Chrome에서는 작동하지 않습니다.

답변

관련 문제