ASP.NET CheckBoxList 項目最小寬度 CSS 相容性解決方案

問題背景

CheckBoxList 控制項預設採用自動寬度渲染，缺乏原生屬性設定單項最小寬度。若選項文字過短，版面易顯得擁擠不整齊；文字過長則可能換行破壞排版。早期常見的 CSS min-width 搭配 IE 專屬 expression 寫法，在遨遊瀏覽器兼容模式（IE7 引擎）下失效，需改良。

改良版 CSS 方案

將表達式目標從 document.body.clientWidth 改為 this.offsetWidth，針對單元格自身寬度判斷，即可在 IE10、遨遊極速/兼容模式皆正常運作：

<style>
.ckblstEffect td {
  min-width: 80px;                     /* 標準瀏覽器 */
  width: expression(this.offsetWidth < 80 ? "80px" : "auto"); /* IE6-7 */
}
</style>

套用至 CheckBoxList

<asp:CheckBoxList ID="ckblstEffect" runat="server"
    DataTextField="MC" DataValueField="ID"
    RepeatDirection="Horizontal" RepeatColumns="10"
    CssClass="ckblstEffect"
    OnDataBound="ckblstEffect_DataBound">
</asp:CheckBoxList>

此樣式同樣適用於 <div> 等區塊元素，具備高復用性。

相容性驗證

• IE10：正常
• 遨遊 4 極速模式 (WebKit)：正常
• 遨遊 4 兼容模式 (IE7)：正常
• 其他舊版 IE：經 expression 回退支援

若發現特定瀏覽器仍有異常，歡迎回報以持續優化。