使用Microsoft Edge中的內嵌塊顯示問題

這裏是問題：我嘗試通過在同一行上使用display：inline-block在「p」和最後一個孩子中對齊兩個「p」元素來創建一個頁面與浮動：正確。代碼在Chrome中運行良好，但是當我在Edge中嘗試它時，我發現了一個小問題：頁腳不在頁面底部，因爲它應該是，但會創建至少1px的空白區域。谷歌瀏覽器使用Microsoft Edge中的內嵌塊顯示問題

頁面視圖：在微軟邊緣https://i.stack.imgur.com/qfCkl.png

頁面視圖：https://i.stack.imgur.com/bFHz1.png

但是，如果我改變身體的背景顏色一樣的頁腳緣「消失」。

問題是，我不想改變身體的顏色，也不使用position：absolute來放下頁腳，因爲我試圖用這種方法修復它，但它不工作，但我不想使用該屬性。我不知道它是否是邊緣顯示問題，或者如果你們可以告訴我代碼是否錯誤。下面是代碼：

<html> 
    <body> 
     <div class="wrapper"> 
      <div class="content"> 
       <!-- content of the page --> 
      </div> 
     </div> 

     <footer> 
      <div class="copyright"> 
       <p>Footer text</p> 
       <p>More Footer text</p> 
      </div> 
     </footer> 
    </body> 
</html>

這是CSS：

* { 
    box-sizing: border-box; 
    margin: 0px; 
    padding: 0px; 
} 

body { 
    font-family: Sans-Serif; 
} 

.wrapper, footer { 
    width: 100%; 
} 

.content { 
    margin: 0 auto; 
    height: 1000px; 
    width: 90%; 
} 

footer { 
    background-color: #333; 
} 

.copyright { 
    padding: 20px; 
} 

.copyright p { 
    color: #fff; 
    display: inline-block; 
    padding: 0px 20px; 
} 

.copyright p:last-child { 
    float: right; 
}

來源

2017-08-13 Isaac Aguilar

* { 
 
    box-sizing: border-box; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
body { 
 
    font-family: Sans-Serif; 
 
} 
 

 
.wrapper, footer { 
 
    width: 100%; 
 
} 
 

 
.content { 
 
    margin: 0 auto; 
 
    height: 1000px; 
 
    width: 90%; 
 
} 
 

 
footer { 
 
    background-color: #333; 
 
} 
 

 
.copyright { 
 
    padding: 20px; 
 
} 
 

 
.copyright p { 
 
    color: #fff; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    padding: 0px 20px; 
 
} 
 

 
.copyright p:last-child { 
 
    float: right; 
 
}

 <div class="wrapper"> 
 
      <div class="content"> 
 
       <!-- content of the page --> 
 
      </div> 
 
     </div> 
 

 
     <footer> 
 
      <div class="copyright"> 
 
       <p>Footer text</p> 
 
       <p>More Footer text</p> 
 
      </div> 
 
     </footer>

請加vertical-align: middle;到.copyright p

來源

2017-08-13 04:52:14 itacode

簡單而高效！現在它在Chrome 60和Edge 41上正確顯示。 –

如果它有效，您可以接受答案[當有人回答我的問題時該怎麼辦？]（https://stackoverflow.com/help/someone-answers） – itacode

使用Microsoft Edge中的內嵌塊顯示問題

回答

相關問題