Chrome:文字换行不一致(字面意思是页面刷新之间)

时间:2013-11-23 04:24:36

标签: php html css google-chrome

我正在制作一个跨度内打印的项目的有序列表。整个HTML代码由PHP函数生成,并在打印之前返回。但是,当我在Chrome(31.0.1650)中查看该页面时,它可以随机显示为两种视图之一:

没有包装:

The correct view

或包装:

enter image description here


虽然我不认为代码很重要(因为它在刷新之间是相同的),这里是屏幕截图中的HTML部分:

<div class='trip' id='trip06'>
<span class='trip-header'>
<span class='trip-number'>Trip 6</span>
<span class='trip-date-span'>Dec 25 &ndash; 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'>&#10004;</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'>&#10004;</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'>&#10004;</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'>&#10004;</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'>&#10004;</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)上有什么可能导致它的线索?

0 个答案:

没有答案