3

私は現在、動的な幅の div のズーム レベルでいくつかの奇妙な動作を修正しようとしていますが、少し困惑しています。

outerWidth()問題は、jquery を使用して 2 つの div で同じ値を設定しようとすると発生しbox-sizing: border-box、一方にはパディングがあり、もう一方にはパディングがなく、ブラウザーのズームは「丸くない」値 (例: chrome では 67% または 33%) に設定されています。サファリのほぼ全員）。サイズは同じですが、パディングのある方が他のレベルよりも小さいこれらのレベルを除きます。

ここに私の問題の例があります: http://jsfiddle.net/ARMMB/3/

編集：問題を明確にするために。@jimjimmy1995が言ったように、他のdivにラップすることでこれを回避する方法がありますが、ページのデザイン全体を変更しないとどこでも使用できないため、完全な解決策ではありません. ズームレベルに応じて正確なサイズを計算する方法と、ここで機能した場合の外側の幅のパディングをもっと探しています。

html:

<body>
    <div id ="a">text a</div>
    <div id ="b">text b</div>
</body>

CSS:

#a{
    background-color: red;
    border-right: 1px solid black;
    padding-left: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#b{
    background-color: blue;
    border-right: 1px solid black;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

js:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    newWidth= 150;
    $("#a").outerWidth(newWidth);
    $("#b").outerWidth(newWidth);
  });
</script>
4

2 に答える 2

1

テキストを別の要素でラップし、それでパディングを適用する必要があります。

<div id ="a"><span id="pad">text a</span></div>
<div id ="b">text b</div>

#pad {
    padding-left: 5px;
}

jsフィドル

于 2013-03-04T09:27:04.437 に答える
0

基本的に問題は、ブラウザが他のズームレベルで異なるパディングを認識することです。サファリの要素を調べると、パディングはスタイルシートで5ピクセルとして定義されていますが、ブラウザはズームアウトすると4ピクセルとして表示されます。基本的に問題が解決すると思われる関数を作成しましたが、パディングにパーセンテージを使用し、を使用してパディングを$(elem)[0].style.padding検出し、レンダリングされた要素のサイズを100で割ってピクセル単位でサイズを検出するのが実際の推測です。解決。とにかく、これが私が作成した関数ですhttp://jsfiddle.net/ARMMB/10/

于 2013-03-08T16:20:52.513 に答える