このリンクをクロームブラウザhttp://jsfiddle.net/A8fhT/3/で開き、要素の幅(270)を確認し、次にズームアウト(ctrl + "-")して、幅(269)を確認します。Firefoxでは、すべて問題ありません。Chromeの解決策はありますか、それともバグですか。
編集:AKの例http://jsfiddle.net/akhurshid/5E9kj/ 画像:http ://s7.postimage.org/qgezkqcor/image.png
このリンクをクロームブラウザhttp://jsfiddle.net/A8fhT/3/で開き、要素の幅(270)を確認し、次にズームアウト(ctrl + "-")して、幅(269)を確認します。Firefoxでは、すべて問題ありません。Chromeの解決策はありますか、それともバグですか。
編集:AKの例http://jsfiddle.net/akhurshid/5E9kj/ 画像:http ://s7.postimage.org/qgezkqcor/image.png
私は主にHTML5ツリーに取り組んでいるgeni.comのリードフロントエンド開発者です。
私は広範囲にわたって作業を行ってきましたがzoom
、すべてのブラウザで一貫した動作を得ることができませんでした。ただし、CSS変換のscale
方がズームよりもはるかに信頼性が高いことがわかりました。
本当にズームが必要な場合は、(または他の要素)に適用scale
してみてください。$(body)
ChromeとFFで一定の幅を得ることができました。
問題は絶対配置要素のみだったので、jQuery 関数 (// 行) を変更しました。
function getWidthOrHeight(elem, name, extra) {
//deletes position//
var $elem = $(elem); //
var position = $elem.css('position'); //
$elem.css('position', ''); //
// Start with offset property
var val = name === "width" ? elem.offsetWidth : elem.offsetHeight,
i = name === "width" ? 1 : 0,
len = 4;
if (val > 0) {
if (extra !== "border") {
for (; i < len; i += 2) {
if (!extra) {
val -= parseFloat(jQuery.css(elem, "padding" + cssExpand[i])) || 0;
}
if (extra === "margin") {
val += parseFloat(jQuery.css(elem, extra + cssExpand[i])) || 0;
} else {
val -= parseFloat(jQuery.css(elem, "border" + cssExpand[i] + "Width")) || 0;
}
}
}
//sets position//
$elem.css('position', position); //
return val + "px";
}
私は同じ問題を抱えていて、解決策を見つけました。
非表示のキャンバス オブジェクトを作成し、その中に幅の問題がある div を含めます。ページが読み込まれたら、キャンバスから div を抽出 (アンラップ) すると、どのズーム レベルでもすべてが見栄えがよくなります!
それが役に立てば幸い!