1

我有一个在 IE、FF 上测试过的小网站，它似乎运行良好。当我在 chrome 或 safari 上尝试它时，一些元素被放置在错误的位置 - 但只是在某些时候。这发生在大约 50% 的时间（10 次刷新中的 5 次）。这些是元素和相关的 CSS：

<div id="ctl00_mainFormPlacHolder_incidentsList" class="incidentsList">
   <a href="ManageUserTasks.aspx?IncidentID=7">
      <div class="incident lightBackgroundMarginBottom completed" runat="server" onserverclick="incidentClicked">
         <div class="incidentName"> All Completed Incident </div>
         <div class="incidentDateTime"> <span>8/12/2013 | 08:42</span> </div>
      </div> 
   </a>
</div>

.incidentsList {
max-height: 820px;
overflow-y: auto;
overflow-x: hidden;
}

.incidentsList a {
text-decoration: none;
}

.incident {
width: 100%;
height: 64px;
line-height: 64px;
}

.incidentName {
height: 100%;
width: 50%;
text-align: left;
text-overflow: ellipsis;
display: inline-block;
white-space: nowrap;
overflow: hidden;
margin-left: 10px;
}

.incidentDateTime {
height: 100%;
width: 40%;
text-align: end;
float: right;
margin-right: 10px;
}

正如你所看到的，我想要的是一条宽度为 100% 的线（.incident），在左边我应该有一些文本（.incidentName），在右边应该有一些其他文本（.incidentDateTime）。

  • 我有几行，但即使只有一行，我也会遇到同样的问题 - 有时右侧文本（.incidentDateTime）会显示在它应该在的位置下方正好 1 行。

我究竟做错了什么？

4

1 回答 1

0

好吧，我认为它的级联效应，就像当任何一个 div 上的内容变得有点大时，包含它的 div 以百分比形式增长，并且可能给两个相邻的 div 一个“max-width”属性应该使它具体的。

于 2013-08-27T09:59:02.403 回答