Html 使用internet explorer但不使用Chrome的div
看起来我在谷歌Chrome上的风格并不像我预期的那样有效。它在InternetExplorer8上运行良好 以下是样式表:Html 使用internet explorer但不使用Chrome的div,html,css,internet-explorer,google-chrome,doctype,Html,Css,Internet Explorer,Google Chrome,Doctype,看起来我在谷歌Chrome上的风格并不像我预期的那样有效。它在InternetExplorer8上运行良好 以下是样式表: @charset "utf-8"; /* Stylesheet for Northview Game Tickets */ #mainwrapper { width:18cm; height:25cm; background-color:#0F0; } #title { width:680px; height:117px;
@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>
<?php echo $_GET["name"]; ?><br>
Type:<br>
<?php echo $_GET["type"]; ?><br>
Price:<br>
$<?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> </p>
</div>
<div id="copyrightwrapper">
Copyright © NHSwag Team, 2011
</div>
</div>
</center>
</body>
</html>
您的页面正在IE8中呈现:
Quirks模式是使用的渲染模式
一些网络浏览器为了
保持向后兼容性
使用专为老年人设计的网页
没有标准的浏览器或代码
一致性
你不能指望一个在IE怪癖模式下工作的页面在任何其他浏览器中都能工作——就像这里的情况一样,它几乎总是不能工作
因此,您应该将doctype第一行更改为使其脱离怪癖模式,并从此处修复大量问题
如果您需要更多关于如何修复HTML/CSS以使用正确的doctype的建议,请告诉我,我将提供一个更全面的答案
我在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> </p>
</div>
</div>
</div>
<div id="copyrightwrapper"> Copyright © NHSwag Team, <?php echo date('Y') ?></div>
</div>
</body>
</html>
您的页面正在IE8中呈现:
Quirks模式是使用的渲染模式
一些网络浏览器为了
保持向后兼容性
使用专为老年人设计的网页
没有标准的浏览器或代码
一致性
你不能指望一个在IE怪癖模式下工作的页面在任何其他浏览器中都能工作——就像这里的情况一样,它几乎总是不能工作
因此,您应该将doctype第一行更改为使其脱离怪癖模式,并从此处修复大量问题
如果您需要更多关于如何修复HTML/CSS以使用正确的doctype的建议,请告诉我,我将提供一个更全面的答案
我在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> </p>
</div>
</div>
</div>
<div id="copyrightwrapper"> Copyright © NHSwag Team, <?php echo date('Y') ?></div>
</div>
</body>
</html>
这是因为IE的默认框大小是非w3c兼容的,顺便说一句,而Chrome在Quirks模式下工作正常 试试这个:
#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+15px
但您真正应该做的是使用正确的doctype。这是因为IE的默认框大小是不符合w3c的,顺便说一句,而Chrome在“怪癖”模式下工作正常 试试这个:
#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+15px
但您真正应该做的是使用正确的doctype。这个问题是由ie和chrome/firefox/opera w3c之间不同的块模型实现引起的,现在ie9已经符合标准。我已经用IE8和chrome进行了测试。简单修复:
#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*/
}
然后从其他float div中删除不必要的填充top他的问题是由ie和chrome/firefox/opera w3c之间不同的块模型实现引起的,ie9现在已经符合标准。我已经用IE8和chrome进行了测试。简单修复:
#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上移除不必要的衬垫顶部Divs@Justian:该评论巧妙的潜台词指向了一些人使用CSS作为布局div的奇怪习惯。永远不要使用IE作为工作方式的参考。如果它在IE中工作,而不是在现代浏览器中工作,那么您的标记是错误的。你永远不应该相信IE会做对任何事情。@Rob不幸的是,我们仍然需要适应浏览器市场40%的缓慢发展@muntoo——这与问题无关。使用IE作为参考来显示某些工作是错误的。如果它在IE中工作,但在现代浏览器中不起作用,那么代码就错了。要想在IE中解决这样的问题,需要黑客。但我没有提到支持IE及其众多问题。Divs@Justian:该评论巧妙的潜台词指向了一些人使用CSS作为布局div的奇怪习惯。永远不要使用IE作为工作方式的参考。如果它在IE中工作,而不是在现代浏览器中工作,那么您的标记是错误的。你永远不应该相信IE会做对任何事情。@Rob不幸的是,我们仍然需要适应浏览器市场40%的缓慢发展@muntoo——这与问题无关。使用IE作为参考来显示某些工作是错误的。如果它在IE中起作用
但不是现代浏览器,那么代码就错了。要想在IE中解决这样的问题,需要黑客。但是我没有提到支持IE及其众多问题。额外的建议肯定会有帮助:从头开始编写代码比修复它要快,你介意我这样做吗?当然:。然后我可以检查源代码,看看我做了什么不正确的事情。我会添加完整的页面来源,如果其中任何一个可以证明是有用的。非常感谢!代码可以完美地工作。明天我们将回顾这些变化额外的建议肯定会有帮助:从头开始编写代码比修复代码要快,你介意我这样做吗?当然:。然后我可以检查源代码,看看我做了什么不正确的事情。我会添加完整的页面来源,如果其中任何一个可以证明是有用的。非常感谢!代码可以完美地工作。明天我们将回顾这些变化