Question

在Chrome中，我看到信息图一直是一个不错的页面。在IE或Firefox中，“性健康护理”，“心理健康护理”和“FYI”部分都超出了页面的右侧。

以下是“心理健康护理”的错误代码段：

<div class="knowurrights" style="max-width:676.6px; display:table;">
  <div class="knowurrights" style="vertical-align:top; border:0; float:left; display:table-cell;">
    <div class="knowurrights" style="vertical-align:top; border:0;">
      <a class="knowurrights" href="http://pegasuslaw.org/wp-content/uploads/2015/05/05c-MentalHealthCare.jpg">
      <img class="knowurrights" src="http://pegasuslaw.org/wp-content/uploads/2015/05/05c-MentalHealthCare.jpg" alt="05-MentalHealthCare" title="Therapy / Counseling 
Mental health care includes treatments such as individual therapy, group therapy, case management, behavior management, family therapy, substance abuse treatment, and other forms of verbal therapy that do not cause discomfort." style="display:block;" /></a>
    </div>
    <div class="knowurrights" style="vertical-align:top; border:0;">
      <a class="knowurrights" href="http://pegasuslaw.org/wp-content/uploads/2015/05/05d-MentalHealthCare.jpg">
      <img class="knowurrights" src="http://pegasuslaw.org/wp-content/uploads/2015/05/05d-MentalHealthCare.jpg" alt="05-MentalHealthCare" title="Some Medications
When you are 14 years old or older, you can consent to psychotropic medication such as Ritalin, anti-depressants, anti-anxiety medication, and anti-psychotic medication.  However, your mental health care provider must tell your parents that you are taking this type of medication." style="display:block;" /></a>
    </div>
    <div class="knowurrights" style="vertical-align:top; border:0;">
      <a class="knowurrights" href="http://pegasuslaw.org/wp-content/uploads/2015/05/05e-MentalHealthCare.jpg">
      <img class="knowurrights" src="http://pegasuslaw.org/wp-content/uploads/2015/05/05e-MentalHealthCare.jpg" alt="05-MentalHealthCare" title="Alcohol and drug use support 
When you are 14 years old or older, you can consent to alcohol and substance abuse treatment." style="display:block;" /></a>
    </div>
  </div>
  <div class="knowurrights" style="vertical-align:top; border:0; display:table-cell;">
    <a class="knowurrights" href="http://pegasuslaw.org/wp-content/uploads/2015/05/05b-MentalHealthCare.jpg">
    <img class="knowurrights" src="http://pegasuslaw.org/wp-content/uploads/2015/05/05b-MentalHealthCare.jpg" alt="05-MentalHealthCare" title="Mental Health Care 
When you are 14 years old or older, you can consent to mental health care on your own." style="display:block;" /></a>
  </div>
</div>

这是“知识者”的Style.css：

#knowurrights {
    font-size: 0;
    border: 0 0 0 0 !important;
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
    cell-padding: 0 !important;
    cell-spacing: 0 !important;
    border-collapse: collapse;
    text-align: top;
    display: block;
    vertical-align: top;
    float: left;
}

非常感谢！：D

Answer 1

最后找到了一个简单的解决方法，只需将table-layout:fixed和width: 100%;添加到包含display:table的div，然后从其中删除属性display:table-cell和float:left第一个（左）儿童div。

Chrome效果很好，但我在Firefox和IE中的div“表格”延伸到了页面之后

1 个答案: