Question

Html代码：

<div class="CorpPerformance">
            <div class="row">
            <div class="DashboardTitle">
                3 Month
            </div>
            <div class="DashboardScore" style="font-weight:bold">
                <a class="redirectLink" data-criteria-corporatesummarycategory="none" data-criteria-corporatesummaryexpand="0" data-criteria-customerpay="" data-criteria-expressservice="" data-criteria-maintenanceplan="" data-criteria-modelname="" data-criteria-rspenddate="" data-criteria-rspstartdate="" data-criteria-warrantypay="" data-criteria-yearmodel="" data-criteria-department="Sales" data-criteria-reportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[October 2014]" data-criteria-summaryperiod="3MONTH" href="/Corporate/OFSSurveySummary">950</a>
            </div>
            <div class="DashboardIcon">
<a class="bootstrap-modal" data-criteria-chartcustomerpay="" data-criteria-chartexpressservice="" data-criteria-chartmaintenanceplan="" data-criteria-chartmodelname="" data-criteria-chartmodelyear="" data-criteria-chartwarrantypay="" data-criteria-chartdepartment="SALES" data-criteria-chartmeasurename="Response Default Computation" data-criteria-chartmeasuretype="score" data-criteria-chartorganization="" data-criteria-chartpagetitle="NSSI Trend" data-criteria-chartreportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[October 2014]" data-criteria-chartsummaryperiod="3MONTH" data-criteria-charttitle="NSSI" data-criteria-chartwheretuple="[Questionnaire].[Questionnaire].[Question].&amp;[OFSP]&amp;[OFSP13011]" href="/Trend" modal-no-resize="True" upper="NSSI Trend"><span>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAZCAYAAACM9limAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHxSURBVFhH7Zg9SEJRFMcdW4QmcRI3xclNcYiGBocGB4dqMQTXdHdoFRqsoCAtJEiMKCpCHkHkECFJUNQgNqgEIQ19DIFBw8n/8SkUPft66n31fnBArnLh/O69556roQHp8WEYSOctuhgFhBdTLN5RLndN2WxZHukNQoopFGrk9W6S1Zogu32FhofXyeFI0cBAnHy+HUqlLunh4Vn+dWfq9RcWG4+f0sjIBnk8aZ5vcHC+kfgMz/URQolBspHIIdlsyxSLnVCl8ih/0wRJbm9f0eSkREbjHJlMC5wkYmIiS4GAxEJbY2bzIsvEZ8w7O3vKkhCfiRVGDFYOuwMr+1Vqtad2oonEOU1NHZAkldtj78V+h76LyedvWIjfv8uJikLfxGA1x8b2yO1O8+qKRs/FYFeMjm5xHclkivKoePRMTKuw4qaZnj7mQioyPRETDjeFoLCKLqRF18XgGh0f3/ty3yEKXRODnYGeQqmBEp2uiMHuQIeKnkKrqC6mVLqnoaGMpqUAVcXg+rVYlrht1zqqiMHRwfsFDZvWiqwSvxaTTF5wS6/VIqvEj8Wcnd3yq9XlWqNq9eePNVHpKAZvGCSPY4JuFREK7fMOcTpXhXzjqEVHMQDJ45hASjR6RMGgxP+q/XU+FfNf0cUo0Bajx/sw0CuzQYKdi8e4ggAAAABJRU5ErkJggg==">
                        </span></a>            </div>
            <div class="CvalNational">
                <span style="color:#fff;font-weight:bold;">
                National
                </span>
            </div>
            <br>
                </div>
        </div>

JSfiddle链接：

http://jsfiddle.net/8nbyc9m7/

不缩放的输出：

enter image description here

如果我缩放到110％或150％或60％缩放它会产生不同的输出。这意味着最后一部分未正确对齐。

缩放：

enter image description here

如何在所有浏览器中为所有级别的缩放维护相同的输出。

Answer 1

将容器设置为宽度等于父容器对我来说是个窍门

http://jsfiddle.net/kursion/8nbyc9m7/2/

顺便说一句......你应该整理一个简单的桌子吗？

.CorpPerformance {
padding-left: 5px;           <----------- changed
display: table;
border: 2px solid gray;
border-radius: 5px;
vertical-align: middle;
line-height: 30px;
width: 340px;                <----------- changed
}
.CorpPerformance .DashboardTitle {
width: 80px;                 <----------- changed
}
.CorpPerformance .DashboardScore {
width: 40px;                 <----------- changed
}
.CorpPerformance .DashboardIcon {
width: 100px;                 <----------- changed
}
.CorpPerformance .CvalNational {
width: 119px;                 <----------- changed
text-align: center;
border-left: 1px dotted black;
background-color: gray;
}

80px + 40px + 100px + 119px + 1px（边框）= 340px

我删除了填充

.CorpPerformance .row > div {}

编辑：使用表格...它更容易和缩放工作！检查我的评论中的链接

Answer 2

http://jsfiddle.net/victor_007/8nbyc9m7/3/

* {
    box-sizing:border-box;
}

使用box-sizing:border-box;从内部提供border和padding并设置您想要的宽度

Answer 3

这是您的解决方案。我所做的是纠正你的桌子并删除最后一个单元格的宽度，以便它可以灵活。我使用table和tr以及td代替div，因为它会让您的CSS更轻松。

如果您不能或不想更改div table，tr和td的{{1}}，则可以随时在div添加以下css {1}}：display: table;替换table，display: table-row;替换tr，display: table-cell;替换td。结果将是相同的。

.CorpPerformance {
  border: 2px solid gray;
  border-radius: 5px;
  vertical-align: middle; /* it's defined for the whole table so you don't need to write it again */
  line-height: 30px;
  max-width: 343px;
  border-spacing: 0; /* important for Chrome browser that add spacing */
}
img {
  max-width: 100%;
  vertical-align: middle;
  border: 0;
}
.CorpPerformance > td {
  padding: 0 5px 3px; /* I've just simplified the writing */
}
.CorpPerformance .DashboardTitle {
  width: 110px;
}
.CorpPerformance .DashboardScore {
  width: 25px;
}
.CorpPerformance .DashboardIcon {
  width: 75px;
}
.CorpPerformance .CvalNational { /* no width anymore */
  text-align: center;
  border-left: 2px dotted black;
  background-color: gray;
  color: #fff; /* I've remove your span to put the css here, if you can do this it's best to keep html free of css */
  font-weight: bold;
}

<table class="CorpPerformance">
  <tr>
    <td class="DashboardTitle">3 Month</td>
    <td class="DashboardScore" style="font-weight:bold"> <a class="redirectLink" data-criteria-corporatesummarycategory="none" data-criteria-corporatesummaryexpand="0" data-criteria-customerpay="" data-criteria-expressservice="" data-criteria-maintenanceplan="" data-criteria-modelname="" data-criteria-rspenddate=""
      data-criteria-rspstartdate="" data-criteria-warrantypay="" data-criteria-yearmodel="" data-criteria-department="Sales" data-criteria-reportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[October 2014]" data-criteria-summaryperiod="3MONTH"
      href="/Corporate/OFSSurveySummary">950</a>
    </td>
    <td class="DashboardIcon">
      <a class="bootstrap-modal" data-criteria-chartcustomerpay="" data-criteria-chartexpressservice="" data-criteria-chartmaintenanceplan="" data-criteria-chartmodelname="" data-criteria-chartmodelyear="" data-criteria-chartwarrantypay="" data-criteria-chartdepartment="SALES"
      data-criteria-chartmeasurename="Response Default Computation" data-criteria-chartmeasuretype="score" data-criteria-chartorganization="" data-criteria-chartpagetitle="NSSI Trend" data-criteria-chartreportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[October 2014]"
      data-criteria-chartsummaryperiod="3MONTH" data-criteria-charttitle="NSSI" data-criteria-chartwheretuple="[Questionnaire].[Questionnaire].[Question].&amp;[OFSP]&amp;[OFSP13011]" href="/Trend" modal-no-resize="True" upper="NSSI Trend"><span>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAZCAYAAACM9limAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHxSURBVFhH7Zg9SEJRFMcdW4QmcRI3xclNcYiGBocGB4dqMQTXdHdoFRqsoCAtJEiMKCpCHkHkECFJUNQgNqgEIQ19DIFBw8n/8SkUPft66n31fnBArnLh/O69556roQHp8WEYSOctuhgFhBdTLN5RLndN2WxZHukNQoopFGrk9W6S1Zogu32FhofXyeFI0cBAnHy+HUqlLunh4Vn+dWfq9RcWG4+f0sjIBnk8aZ5vcHC+kfgMz/URQolBspHIIdlsyxSLnVCl8ih/0wRJbm9f0eSkREbjHJlMC5wkYmIiS4GAxEJbY2bzIsvEZ8w7O3vKkhCfiRVGDFYOuwMr+1Vqtad2oonEOU1NHZAkldtj78V+h76LyedvWIjfv8uJikLfxGA1x8b2yO1O8+qKRs/FYFeMjm5xHclkivKoePRMTKuw4qaZnj7mQioyPRETDjeFoLCKLqRF18XgGh0f3/ty3yEKXRODnYGeQqmBEp2uiMHuQIeKnkKrqC6mVLqnoaGMpqUAVcXg+rVYlrht1zqqiMHRwfsFDZvWiqwSvxaTTF5wS6/VIqvEj8Wcnd3yq9XlWqNq9eePNVHpKAZvGCSPY4JuFREK7fMOcTpXhXzjqEVHMQDJ45hASjR6RMGgxP+q/XU+FfNf0cUo0Bajx/sw0CuzQYKdi8e4ggAAAABJRU5ErkJggg==" /></span></a> 
    </td>
    <td class="CvalNational">Test National</td>
  </tr>
</table>

div宽度和高度对齐适用于所有级别的缩放

3 个答案: