个人中心
gpt4 book ai didi

html - Div 在 Internet Explorer 中工作，但在 Chrome 中不工作

转载 作者：行者123 更新时间：2023-11-28 04:25:42 26 4
gpt4 key购买 nike

看起来我在 Google Chrome 中的样式并没有像我预期的那样有效 (link)。它在 Internet Explorer 8 上工作得很好。

这是样式表:

@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>

最佳答案

您的页面正在 Quirks mode 中呈现在 IE8 中:

Quirks mode is a rendering mode used by some web browsers for the sake of maintaining backward compatibility with web pages designed for older browsers or coded without standards conformance.

您不能希望为在 IE Quirks 模式下工作而创建的页面也能在任何其他浏览器中工作 - 它几乎总是不会，就像这里的情况一样。

因此，您应该将文档类型(第一行)更改为 <!DOCTYPE html>让它脱离 Quirks 模式并解决那里的(许多)问题。

如果您需要更多关于如何修复您的 HTML/CSS 以使用正确的文档类型的建议，请告诉我，我将提供有关如何执行此操作的更全面的答案。 p>

我在 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>

关于html - Div 在 Internet Explorer 中工作，但在 Chrome 中不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4844324/

26 4 0
文章推荐： html - 使用内联样式将垂直居中的图像定位到 block 段落的左侧？
文章推荐： Javascript:数组中的多个过滤器
文章推荐： html - 在选项标签的多选菜单中更改事件颜色
文章推荐： javascript - 为什么 eq 在使用 after 时不能在 jquery 中工作？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com