前端開發程序中，設定css引起的一些bug現象及解決方法-有解無憂

一、設定overflow:hiden行內元素會發生偏移的現象

父級元素包含幾個行內元素

<div id="box">
   <p>
     <span>按鈕</span>
     <span>測驗文字文字文字測驗文字文字文字</span>
     <span>看這里</span>
   </p>
 </div>

      #box p{
        width: 800px;
        font-size: 30px;
       }

      #box p span{
        display: inline-block;
        box-sizing: border-box;
        /*vertical-align:top/bottom*/
      }
      #box p span:nth-child(2){
        padding-left: 10px;
        width: 350px;
       /* overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;*/
      }

正常顯示，且在同一行；

當設定overflow:hidden之后，元素出現不對齊的情況

原因：行內元素的默認對齊方式是基線對齊即（vertical-align：baseline），設定設定overflow不為visible之后改變了他的默認對齊方式為下邊距邊緣；其他行內元素依然還是基線對齊就會出現下沉的視覺效果

解決方法：

1、重新設定所有行內元素的對齊方式為vertical-align:top或者bottom

2、設定所有的行內元素的overflow不為visible

3、設定flex布局

說明：vertical-align屬性針對行內元素和表格屬性元素使用，在塊級元素中不起作用

二、子級寬度沒有自適應內容寬度撐開，只適應到父級100%

 #box{
        width: 600px;
      }
      .inner-box{
        display: flex;
        width: 100%;
        height: auto;
        background-color: #eee;
        overflow: auto;
      }
      p{
        
        width: auto;
        font-size: 16px;
        background-color: aqua;
        white-space: nowrap;
      }
<div id="box">
      <div class="inner-box">
        <p>
          父級設定寬度100%時，超出的部分有滾動條滾動時出現;
          子級寬度自適應，由內容撐開；
          問題：
          1、子級寬度沒有自適應內容寬度撐開，只適應到父級100%；
          原因：
          1、子級不設定寬度或者寬度自適應撐開且設定不換行的情況下，子級寬度只會撐開到父級的100%寬度，即上圖p標簽只會撐開至600px而不是text的撐開寬度
          解決：
          1、使子級p標簽脫離檔案流，設定absolute；
          2、設定父級節點innerbox,dispaly:flex;dispaly:grid;
        </p>
      </div>
    </div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/41370.html

標籤：Html/Css

上一篇：Layer UI表格列日期格式化及取消自動填充日期

下一篇：HTML連載87-完善內容區域