私はこれをもう少しいじってみましたが、問題を解決するために思いついた唯一の解決策は、次のようなものです。
var thinBorder = 1;
var mediumBorder = 3;
var thickBorder = 5;
function getLeftBorderWidth($element) {
var leftBorderWidth = $element.css("borderLeftWidth");
var borderWidth = 0;
switch (leftBorderWidth) {
case "thin":
borderWidth = thinBorder;
break;
case "medium":
borderWidth = mediumBorder;
break;
case "thick":
borderWidth = thickBorder;
break;
default:
borderWidth = Math.round(parseFloat(leftBorderWidth));
break;
}
return borderWidth;
}
function getRightBorderWidth($element) {
var rightBorderWidth = $element.css("borderRightWidth");
var borderWidth = 0;
switch (rightBorderWidth) {
case "thin":
borderWidth = thinBorder;
break;
case "medium":
borderWidth = mediumBorder;
break;
case "thick":
borderWidth = thickBorder;
break;
default:
borderWidth = Math.round(parseFloat(rightBorderWidth));
break;
}
return borderWidth;
}
と に注意してMath.round()
くださいparseFloat()
。これらは、IE9 がの代わりにとの代わりにforを返す0.99px
ためです。thin
1px
4.99px
thick
5px
編集
コメントで、IE7 はシン、ミディアム、シックでサイズが異なると述べました。
それらはわずか 0.5 ピクセルだけずれているように見えますが、これは扱いが難しく、完全な数値が最も必要であることを示しています。
私の提案は、違いの.5pxを単に無視し、IE7以下を使用している場合に最も可能性の高い目立たない欠陥を認めるか、それを処理するのに苦労している場合は、次のように定数を調整することです。
var thinBorder = 1;
var mediumBorder = 3;
var thickBorder = 5;
// Will be -1 if MSIE is not detected in the version string
var IEVersion = navigator.appVersion.indexOf("MSIE");
// Check if it was found then parse the version number. Version 7 will be 17 but you can trim that off with the below.
If(IEVersion > -1){
IEVersion = parseInt(navigator.appVersion.split("MSIE")[1]);
}
// Now you can simply check if you are in an ancient version of IE and adjsut any default values accordingly.
If(IEVersion < 7){
thinBorder = 0.5;
mediumBorder = 3.5;
thickBorder = 4.5;
}
/// rest as normal
上記のいずれも、決してコピペの解決策ではなく、この問題に対処できるいくつかの方法のデモンストレーションにすぎません。これらすべてのヘルパーを個別の関数、プラグイン、または拡張機能に自然にラップします。
最終的な解決策では、浮動小数点オフセットと丸めの問題に対処する必要さえあるかもしれません。
これで十分ですが、始めることができるはずです。