Question

我在IE中有一个关于内联无序列表的奇怪渲染问题。我正在尝试做的是为项目的生命周期制作一个可视化工具，但每当我尝试在我的<p>对象中添加任何旨在保持时间段的文本时，它都会移动整个{{1} } element down，但仅在Internet Explorer中。

请注意这个问题：https://jsfiddle.net/xny1zv3j/

我对名称和位置没关系（例如：'John'和'Project Lead'被拉下来 - 这对我来说不是问题。但是在IE和IE中，似乎整个列表元素当<li>元素为空时，它被简单地忽略，并且在所有浏览器中都没问题，但是当它有内容时，IE就会被吓坏。

Answer 1

您应该只需将vertical-align: top添加到.li班级。

Answer 2

这是你拍摄的吗？ https://jsfiddle.net/xny1zv3j/3/

HTML

<div class="container body-content">
<div class="container" id="main-container">
        <ul class="timeline">
            <li class="li" >
                <div class="timestamp">
                    <div class="author">John</div>
                    <div class="date">Project Lead</div>
                </div>
                <div class="status">
                    <div class="time-period">
                        <p></p>
                    </div>
                    <h4>Created Project</h4>
                </div>
            </li>
            <li class="li" >
                <div class="timestamp">
                    <div class="author">Jenny</div>
                    <div class="date">Programmer</div>
                </div>
                <div class="status">
                    <div class="time-period">
                        <p></p>
                    </div>
                    <h4>Built Project</h4>
                </div>
            </li>
            <li class="li" >
                <div class="timestamp">
                    <div class="author">Jeremy</div>
                    <div class="date">Marketing</div>
                </div>
                <div class="status">
                    <div class="time-period">
                        <p>2 yrs</p>
                    </div>
                    <h4>Advertised Project</h4>
                </div>
            </li>
            <li class="li" >
                <div class="timestamp">
                    <div class="author">Jack</div>
                    <div class="date">Sales</div>
                </div>
                <div class="status">
                    <div class="time-period">
                        <p></p>
                    </div>
                    <h4>Sold Project</h4>
                </div>
            </li>
            <li class="li" >
                <div class="timestamp">
                    <div class="author">Jebeddiah</div>
                    <div class="date">IT</div>
                </div>
                <div class="status">
                    <div class="time-period">
                        <p></p>
                    </div>
                    <h4>Defended Project</h4>
                </div>
            </li>
        </ul>
    </div>
</div>

CSS

 .timeline {
   text-align: left;
   list-style-type: none;
   display: inline-block;
   margin-bottom:-23px;
   padding-top: 0px;
   padding-bottom: 0px;
   padding-left: 5px;
   padding-right: 5px;
 }

 .li {
   width: 150px;
   display: inline-block; 
   }

 .timestamp {
   margin-bottom: 20px;
   padding: 0px;
   font-weight: 100;
   display: block;
   white-space: nowrap;
   overflow: hidden;
 }

 .status {
   padding-top: 10px;
   position: relative;
   transition: all 200ms ease-in;
   white-space: normal;

 }
   .status h4 {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     word-wrap: break-word;
     padding-bottom: 3px;
   }
   .time-period {
     display: inline;
     text-align: center; }

     .time-period p {
      /* margin: -30px 0px 20px;*/
     }

     .time-period p:empty {
         display:inline-block;
     }

Internet Explorer中的奇怪CSS（关于利润率，我相信）

2 个答案: