IE6 で borderColor="transparent" が機能しない

uuAltCSS+.js のコードリード用のエントリです。コードを知らない方には無意味なエントリです。

border-radius: 用の処理に、「ボーダー部分をcanvasで描画し、元々borderが設定されていたノードの borderColor を透明にする」という処理がありますが、IE6 は borderColor="transparent" が機能しません(colorが赤なら、赤いボーダーが描画されてしまう)

単純に、border = "0px none" としてしまうと、再描画時にノードの幅/高さを求める処理で問題が発生します(ボーダー幅がなくなったため、元々のサイズより小さく再描画されてしまう)。

これを回避するため以下のコードを追加しました。

処理の概要は

borderColor = "transparent" と同じように振舞うには、マージンにボーダー幅を含めた状態で描画する
ただし幅/高さの再計算の直前に、元の状態(ボーダーが設定されている状態)に戻し要素のサイズを再計算する。再計算が終わったら、border = "0px none" を設定する。

です。

function boxshadow() {
  (略)
+   if (_ie6) {
+     // オリジナルの値を保存する
+     prop.ie6borderorg = {
+       marginTop: cs.marginTop,
+       marginLeft: cs.marginLeft,
+       marginRight: cs.marginRight,
+       marginBottom: cs.marginBottom,
+       borderTopWidth: cs.borderTopWidth,
+       borderLeftWidth: cs.borderLeftWidth,
+       borderRightWidth: cs.borderRightWidth,
+       borderBottomWidth: cs.borderBottomWidth
+     };
+     // 上書用の値を事前に作成しておく
+     prop.ie6borderfix = {
+       marginTop: (prop.NMT + prop.NBT) + "px",
+       marginLeft: (prop.NML + prop.NBL) + "px",
+       marginRight: (prop.NMR + prop.NBR) + "px",
+       marginBottom: (prop.NMB + prop.NBB) + "px",
+       border: "0px none"
+     };
+   }
  (略)
}

function boxshadowRecalc() {
  var nodeProp = _plan.boxshadow, v, i = 0, iz = nodeProp.length,
      prop;

  for (; i < iz; i += 2) {
    v = nodeProp[i]; // node
    prop = v.uuAltCSSBoxShadow;
    // update rect
+   if (_ie6) { // restore border and margin state
+     _mm.mix(v.style, prop.ie6borderorg);
+   }
    prop.nodeRect = _style.getRect(v);
    prop.viewRect = _style.getRect(prop.view);
    prop.nodeOffset = getOffsetFromAncestor(v, prop.view);
    boxshadowDraw(v, prop, 1);
  }
}

function boxshadowDraw(node, pr, redraw) {
  (略)
  // --- gradient ---
  if (pr.gradtype) {
    (略)
  }
  if (pr.radius) {
    (略)
    if (!redraw) {
      // bg setting
      node.style.backgroundColor = TRANSPARENT;
      node.style.backgroundImage = "none";
-     if (_ie6) {
-       // IE6 bug 'borderColor = "transparent";' unsupported
-       node.style.paddingTop = pr.NBT + pr.NPT;
-       node.style.paddingLeft = pr.NBL + pr.NPL;
-       node.style.paddingRight = pr.NBR + pr.NPR;
-       node.style.paddingBottom = pr.NBB + pr.NPB;
-       node.style.border = "0px none";
-     } else {
-       node.style.borderColor = TRANSPARENT;
-     }
+     node.style.borderColor = TRANSPARENT;
+   }
+   if (_ie6) {
+     // IE6 'borderColor = "transparent";' unsupported
+     _mm.mix(node.style, pr.ie6borderfix);
    }
  }
  (略)
}