我正在制作一个跨度内打印的项目的有序列表。整个HTML代码由PHP函数生成,并在打印之前返回。但是,当我在Chrome(31.0.1650)中查看该页面时,它可以随机显示为两种视图之一:
没有包装:
或包装:
虽然我不认为代码很重要(因为它在刷新之间是相同的),这里是屏幕截图中的HTML部分:
<div class='trip' id='trip06'>
<span class='trip-header'>
<span class='trip-number'>Trip 6</span>
<span class='trip-date-span'>Dec 25 – Dec 26 (2 nights)</span>
<span id='buttons' class='reservation-buttons'>
<a href='request.php?action=edit&requestNum=6'>Edit Request</a>
<a href='request.php?action=delete&requestNum=6'>Delete Request</a></span></span><span class='daily-list'>
<span class='list-date'>Dec 25th</span>
<span class='lodge-list'><span class='list-title'>Lodge List</span>
<ol>
<span class='list-request lodge-request' title='Request Made: Nov 22, 12:07am
Made By: Michael Yingling
Last Updated: Nov 22, 12:07am
Updated By: Michael Yingling'><li><span class='status-icon'>✔</span>
<span class='member-name'>Matt Holcomb</span></li></span>
<span class='list-request lodge-request' title='Request Made: Nov 22, 12:23am
Made By: Michael Yingling
Last Updated: Nov 22, 12:23am
Updated By: Michael Yingling'><li><span class='status-icon'>✔</span>
<span class='member-name'>Benjamin Doolittle</span></li></span>
<span class='list-request lodge-request your-request' title='Request Made: Nov 22, 12:00am
Made By: Michael Yingling
Last Updated: Nov 22, 12:00am
Updated By: Michael Yingling'><li><span class='status-icon'>?</span>
<span class='member-name'>Colleen Zimmer</span></li></span>
<span class='list-request lodge-request your-request' title='Request Made: Nov 22, 12:00am
Made By: Michael Yingling
Last Updated: Nov 22, 12:00am
Updated By: Michael Yingling'><li><span class='status-icon'>?</span>
<span class='member-name'>John Zimmer</span></li></span>
<span class='list-request lodge-request' title='Request Made: Nov 22, 12:07am
Made By: Michael Yingling
Last Updated: Nov 22, 12:07am
Updated By: Michael Yingling'><li><span class='status-icon'>?</span>
<span class='member-name'>Ethan Holcomb</span></li></span>
<span class='list-request lodge-request' title='Request Made: Nov 22, 12:09am
Made By: Michael Yingling
Last Updated: Nov 22, 12:09am
Updated By: Michael Yingling'><li><span class='status-icon'>?</span>
<span class='member-name'>William M. Rappa</span></li></span>
<span class='list-request lodge-request' title='Request Made: Nov 22, 12:10am
Made By: Michael Yingling
Last Updated: Nov 22, 12:10am
Updated By: Michael Yingling'><li><span class='status-icon'>?</span>
<span class='member-name'>William M. Rappa</span></li></span>
<span class='list-request lodge-request' title='Request Made: Nov 22, 12:23am
Made By: Michael Yingling
Last Updated: Nov 22, 12:23am
Updated By: Michael Yingling'><li><span class='status-icon'>?</span>
<span class='guest-name'>Emma GF</span><span class='guest-icon'>G</span></li></span>
</ol></span>
<span class='waiting-list'><span class='list-title'>Waiting List</span>
<ol>
</ol></span>
</span><span class='daily-list'>
<span class='list-date'>Dec 26th</span>
<span class='lodge-list'><span class='list-title'>Lodge List</span>
<ol>
<span class='list-request lodge-request your-request' title='Request Made: Nov 22, 12:00am
Made By: Michael Yingling
Last Updated: Nov 22, 12:00am
Updated By: Michael Yingling'><li><span class='status-icon'>✔</span>
<span class='member-name'>Colleen Zimmer</span></li></span>
<span class='list-request lodge-request your-request' title='Request Made: Nov 22, 12:00am
Made By: Michael Yingling
Last Updated: Nov 22, 12:00am
Updated By: Michael Yingling'><li><span class='status-icon'>✔</span>
<span class='member-name'>John Zimmer</span></li></span>
<span class='list-request lodge-request' title='Request Made: Nov 22, 12:07am
Made By: Michael Yingling
Last Updated: Nov 22, 12:07am
Updated By: Michael Yingling'><li><span class='status-icon'>✔</span>
<span class='member-name'>Ethan Holcomb</span></li></span>
<span class='list-request lodge-request' title='Request Made: Nov 21, 3:15pm
Made By: Mark E. Yingling
Last Updated: Nov 21, 3:15pm
Updated By: '><li><span class='status-icon'>?</span>
<span class='member-name'>Carol F. Yingling</span></li></span>
<span class='list-request lodge-request' title='Request Made: Nov 21, 3:15pm
Made By: Mark E. Yingling
Last Updated: Nov 21, 3:15pm
Updated By: '><li><span class='status-icon'>?</span>
<span class='member-name'>Paul Yingling</span></li></span>
<span class='list-request lodge-request' title='Request Made: Nov 21, 3:15pm
Made By: Mark E. Yingling
Last Updated: Nov 21, 3:15pm
Updated By: '><li><span class='status-icon'>?</span>
<span class='member-name'>Mark E. Yingling</span></li></span>
<span class='list-request lodge-request' title='Request Made: Nov 21, 3:18pm
Made By: Jim Corrigan
Last Updated: Nov 21, 3:18pm
Updated By: '><li><span class='status-icon'>?</span>
<span class='member-name'>Jim Corrigan</span></li></span>
<span class='list-request lodge-request' title='Request Made: Nov 21, 3:18pm
Made By: Jim Corrigan
Last Updated: Nov 21, 3:18pm
Updated By: '><li><span class='status-icon'>?</span>
<span class='member-name'>Kyle Corrigan</span></li></span>
<span class='list-request lodge-request' title='Request Made: Nov 21, 5:36pm
Made By: John Burke
Last Updated: Nov 21, 5:36pm
Updated By: '><li><span class='status-icon'>?</span>
<span class='member-name'>John Burke</span></li></span>
<span class='list-request lodge-request' title='Request Made: Nov 21, 5:36pm
Made By: John Burke
Last Updated: Nov 21, 5:36pm
Updated By: '><li><span class='status-icon'>?</span>
<span class='member-name'>Isabelle Burke</span></li></span>
<span class='list-request lodge-request' title='Request Made: Nov 22, 12:07am
Made By: Michael Yingling
Last Updated: Nov 22, 12:07am
Updated By: Michael Yingling'><li><span class='status-icon'>?</span>
<span class='member-name'>Matt Holcomb</span></li></span>
</ol></span>
<span class='waiting-list'><span class='list-title'>Waiting List</span>
<ol>
<span class='list-request waiting-request' title='Request Made: Nov 21, 4:31pm
Made By: Richard Allen
Last Updated: Nov 21, 4:31pm
Updated By: '><li><span class='status-icon'>?</span>
<span class='member-name'>Richard Allen</span></li></span>
这是应用的CSS:
div.trip {
display: block;
margin-bottom: 10px;
}
.trip-number {
font-size: 16pt;
}
.trip-date-span {
font-size: 12pt;
}
.trip-header {
display: block;
}
.status-icon {
font-weight: bold;
padding: 0 2px 0 2px;
margin: 0 2px 0 2px;
}
.guest-icon {
font-weight: bold;
color: black;
background: #9999cc;
padding: 0 2px 0 2px;
margin: 0 2px 0 2px;
}
.list-request {
display: block;
margin: 1px 0 1px 0;
padding: 0 0 1px 1px;
}
.daily-list {
margin: 2px 3px 2px 3px;
display: inline-block;
vertical-align: top;
}
.daily-list ol {
margin: 0;
padding: 0;
list-style-position: inside;
list-style-type: decimal-leading-zero;
}
.daily-list li {
padding: 0;
margin: 0 3px 0 3px;
}
.list-date {
width: 100%;
text-align: center;
display: block;
font-weight: bold;
color: white;
background: black;
padding: 2px 0 2px 0;
margin: 0;
}
.list-title {
width: 100%;
text-align: center;
display: block;
background: #d1d1d1;
padding: 2px 0 2px 0;
margin: 0 0 2px 0;
border-top: solid 1px black;
}
.your-request {
color: white;
background: #000099;
}
HTML和CSS在刷新之间是相同的(当然)并且这个问题没有出现在Firefox(24.0)上有什么可能导致它的线索?