0

.slides-containerクリックしたリンクに応じて動くスライダーをjqueryで作成しました。これは、Firefox (20.0) を除くすべての主要なブラウザー (ie9 を含む) で美しく動作します。.info-container問題は、パディングを無効にするとすべてが美しく機能するため、Firefox がパディングを無視することです。.info-container他のブラウザを台無しにすることなく、計算を行うときに のパディングを認識するように jquery に指示するにはどうすればよいですか? 誰でもそれを修正する方法を知っていますか?

JS

var contentwidth = parseInt($('.slides-content').innerWidth(), 10);
$('.slides-container').css({'width': $('.info-container').length*contentwidth});
$('.info-container').css({'width': contentwidth});

HTML

<div class="slides-content clearfix">
                <div class="slides-container">
                    <div class="info-container me clearfix">
                        <div class="info"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, aliquam amet minus porro animi assumenda error esse sit explicabo quam quisquam ipsum nihil dignissimos. Dolorem quisquam quaerat maiores ducimus optio.</p></div>
                    </div>
                    <div class="info-container pics clearfix">
                        <div class="info"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, asperiores, fugit, necessitatibus officia facere tempora ad officiis sed est architecto voluptatibus enim in. Aspernatur amet fugiat repellat incidunt placeat voluptas.</p></div>
                    </div>
                    <div class="info-container about clearfix">
                        <div class="info"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, et perspiciatis quasi voluptatem maxime vero dolores iusto fugiat corporis ducimus cum at consectetur repellat culpa eius blanditiis ut? Eaque, assumenda?</p></div>
                    </div>
                </div>
            </div>

CSS

.slides-content {
    overflow: hidden;
    width: 100%;
}
.slides-container {
    overflow: hidden;
    position: relative;
}
.info-container {
    padding: 35px;
    position: relative;
    background-color: #F8F8F8;
    color: #7F7F7F;
    font-size: 17px;
    float: left;
    line-height: 19px;
    font-weight: 300;
    .info {
        position: relative;
        float: left;
    }
}

エラー ここに画像の説明を入力 訂正 ここに画像の説明を入力

4

1 に答える 1

0

info と info-container の内側の幅が同じかどうかを確認します。

于 2013-04-24T21:02:47.273 に答える