Q&A
1527.27pxということは1400pxで指定されたdivからはみ出てるということですか？
###前提・実現したいこと
WordPressでMeta Sliderというプラグインを使用しています。
スライドを登録して表示させることはできましたが、
FireFox（バージョン49.0.1）でスライドの表示サイズが大きくなってしまいます。
OSはMac OSⅩ（バージョン10.11.6）です。
ChromeとSafariでは意図したサイズで表示されました。
表示させる画像は幅：1400px、高さ：360pxで作成しています。
FireFoxで見ると、スライダーの幅：1527.27px、高さ：392.745pxというサイズになっています。
Firefoxでの表示も幅：1400px、高さ：360pxのサイズにすることはできますでしょうか。
###該当のソースコード
<!-- meta slider --> <div style="max-width: 1400px; margin: 0 auto;" class="metaslider metaslider-flex metaslider-29 ml-slider"> <div id="metaslider_container_29"> <div id="metaslider_29" class="flexslider"> <ul class="slides"> <li style="display: block; width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; z-index: 2;" class="slide-31 ms-image flex-active-slide"><img src="../wp-content/uploads/2016/07/img02-1396x359.jpg" height="360" width="1400" alt="" class="slider-29 slide-31" draggable="false" style=" "></li> <li style="display: block; width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; z-index: 1;" class="slide-30 ms-image"><img src="../wp-content/uploads/2016/07/img01.jpg" height="360" width="1400" alt="" class="slider-29 slide-30" draggable="false"></li> <li style="display: block; width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; z-index: 1;" class="slide-32 ms-image"><a href="#" target="_self"><img src="../wp-content/uploads/2016/07/img03-1396x359.jpg" height="360" width="1400" alt="" class="slider-29 slide-32" draggable="false"></a></li> <li style="display: block; width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; z-index: 1;" class="slide-308 ms-image"><img src="../wp-content/uploads/2016/07/slider_img_alf-1396x359.jpg" height="360" width="1400" alt="" class="slider-29 slide-308" draggable="false"></li> <li style="display: block; width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; z-index: 1;" class="slide-344 ms-image"><a href="#" target="_self"><img src="../wp-content/uploads/2016/09/slider_pati-1396x359.jpg" height="360" width="1400" alt="" class="slider-29 slide-344" draggable="false"></a></li> </ul> <ol class="flex-control-nav flex-control-paging"><li><a class="flex-active">1</a></li><li><a>2</a></li><li><a>3</a></li><li><a>4</a></li><li><a>5</a></li></ol> <ul class="flex-direction-nav"><li><a class="flex-prev" href="#"><</a></li><li><a class="flex-next" href="#">></a></li></ul> </div> </div> <script type="text/javascript"> var metaslider_29 = function($) { $('#metaslider_29').addClass('flexslider'); // theme/plugin conflict avoidance $('#metaslider_29').flexslider({ slideshowSpeed:3000, animation:"fade", controlNav:true, directionNav:true, pauseOnHover:true, direction:"horizontal", reverse:false, animationSpeed:600, prevText:"<", nextText:">", slideshow:false }); }; var timer_metaslider_29 = function() { var slider = !window.jQuery ? window.setTimeout(timer_metaslider_29, 100) : !jQuery.isReady ? window.setTimeout(timer_metaslider_29, 1) : metaslider_29(window.jQuery); }; timer_metaslider_29(); </script> </div> <!--// meta slider--> </div>
public.css（Meta Sliderのcss）
/** * The files in /assets are unmodified. * This file contains * - resets, in an attempt to ensure sliders display properly in all themes * - modifications to the default sliders CSS */ /* general resets */ .metaslider { position: relative; z-index: 0; } .metaslider .caption { padding: 5px 10px; word-wrap: break-word; } .metaslider .caption-wrap { position: absolute; bottom: 0; left: 0; background: black; color: white; opacity: 0.7; margin: 0; display: block; width: 100%; line-height: 1.4em; } .metaslider img { height: auto; padding: 0; margin: 0; -moz-user-select: none; } .metaslider a { outline: none; } .metaslider .theme-default .nivoSlider { -webkit-box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; box-shadow: 0 0 0; } .metaslider.ms-left { float: left; margin: 0 20px 20px 0; } .metaslider.ms-right { float: right; margin: 0 0 20px 20px; } .metaslider li:before, .metaslider li:after { content: "" !important; display: none !important; bottom: auto !important; margin: 0 !important; } .metaslider .caption-wrap .caption img { width: auto; } /** quick resets **/ .article .metaslider ul, .article .metaslider ol, .article .metaslider li, .article .metaslider img, .art-article .metaslider ul, .art-article .metaslider ol, .art-article .metaslider li, .art-article .metaslider img, #widgets .metaslider ul, #widgets .metaslider ol, #widgets .metaslider li, #widgets .metaslider img, .entry .metaslider ul, .entry .metaslider ol, .entry .metaslider li, .entry .metaslider img, #content .metaslider ul, #content .metaslider ol, #content .metaslider li, #content .metaslider img, .entry-content .metaslider ul, .entry-content .metaslider ol, .entry-content .metaslider li, .entry-content .metaslider img, .metaslider .flexslider ul, .metaslider .flexslider .slides li, .metaslider .flexslider .slides ul, .metaslider .flexslider .slides ol, .metaslider .flexslider .flex-direction-nav, .metaslider .flexslider .flex-direction-nav li, *[class*='-article'] .metaslider img { border: 0; margin: 0; list-style-type: none; list-style: none; padding: 0; line-height: normal; max-width: none; max-height: none; } .metaslider .slides img { width: 100%; display: block; } ```] ###試したこと cssハックでFirefoxのみ画像サイズを少し小さめのサイズ （width: 1284px;、height: 330px;）に指定することで、 幅：1400px、高さ：360pxに近い形の持っていくことはできました。 あまり美しい方法ではないので、違う方法や原因をご教授願いたいです。
質問ありがとうございます。
はみ出ているというよりは、divの枠が大きく広がっています。
overflow:hidden;でも隠れません。
Meta Sliderの公式サイトのサンプルでも同じ現象起きますか？
公式サイトを確認しましたが、公式サイトでは現象の確認はできませんでした。
https://www.metaslider.com/examples/image-slides/
ということは、私のcssか何かの設定が間違っているということですね。
スライダーの種類を変えても起こりますか？（「幅」の上のボタンで切り替えのはず）
回答1件
0
ベストアンサー
生成されるソースはchromeもfirefoxも同じなんですよね？
生成された該当部分だけを切り取って再現するか見てみて、
（スライダーは基本他のCSSの影響は受けないように作られてるはずなので）
再現しなければどこからかCSSが上書きされているって感じですね。
あといくつCSS読み込んでるか分かりませんが1つ1つ外していって確かめるのもいいかと思います。
投稿2016/09/29 13:18
総合スコア2722
回答ありがとうございます。
生成されるソースはどのブラウザも同じです。
１つ１つ外して行って、結局全てのcssを外してみましたが、ブラウザ間のサイズ差は出たままでした。
ということは上記の該当のソースコードのhtmlの部分だけで差がでるということですか？
そういうことになってしまいます。。
ちなみに、違う画像を入れたり、管理画面上で設定できるスライダーの高さや幅を変更しても、Firefoxだけ指定サイズより大きくなってしまいました。
これでも起こります？
<!-- meta slider -->
<div style="max-width: 1400px; margin: 0 auto;" class="metaslider metaslider-flex metaslider-29 ml-slider">
<div id="metaslider_container_29">
<div id="metaslider_29" class="flexslider">
<ul class="slides">
<li style="display: block; width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; z-index: 2;" class="slide-31 ms-image flex-active-slide"><img src="https://placehold.jp/1400x360.png" height="360" width="1400" alt="" class="slider-29 slide-31" draggable="false" style="
"></li>
</ul>
</div>
</div>
</div>
<!--// meta slider-->
こちらのコードを使用したらちゃんとしたサイズ（1400*360px）で表示されました！
ありがとうございます！！！
これは画像のサイズが問題だったのでしょうか。。。
Macではないので実験的なことをずっとさせてしまって申し訳ないですが…
見えたのであれば、今度は少しずつ戻していきましょうか。
<li>を1つ1つ増やしてみたりです。
あ、その前に本当に画像なのかもわからないので一度動いてるスライダーの画像を↑のに変えてみましょうか。これでも再現するなら画像ではないことが分かるので。
丁寧にご指導いただいて、ありがとうございます！
<li>を増やして画像も変えてみましたが、
サイズは1400*360pxと正常でした。
ありがとうございます！
あ、少し違います…説明不足ですみません。
firefoxの不具合が起こる状態で画像だけ「https://placehold.jp/1400x360.png」に変更です。
これで再現すれば画像ではないですし、再現しなければ画像が原因なんですかね～
画像が原因とは少々考えづらいので再現するとは思いますが…
とりあえず<li>を増やしても再現しないのでひとつひとつ元のソースに近づけていく感じですね。
↓5つに戻してページャー復活。<script>だけない感じ。
<!-- meta slider -->
<div style="max-width: 1400px; margin: 0 auto;" class="metaslider metaslider-flex metaslider-29 ml-slider">
<div id="metaslider_container_29">
<div id="metaslider_29" class="flexslider">
<ul class="slides">
<li style="display: block; width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; z-index: 2;" class="slide-31 ms-image flex-active-slide"><img src="https://placehold.jp/1400x360.png" height="360" width="1400" alt="" class="slider-29 slide-31" draggable="false" style="
"></li>
<li style="display: block; width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; z-index: 1;" class="slide-30 ms-image"><img src="https://placehold.jp/1400x360.png" height="360" width="1400" alt="" class="slider-29 slide-30" draggable="false"></li>
<li style="display: block; width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; z-index: 1;" class="slide-32 ms-image"><a href="#" target="_self"><img src="https://placehold.jp/1400x360.png" height="360" width="1400" alt="" class="slider-29 slide-32" draggable="false"></a></li>
<li style="display: block; width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; z-index: 1;" class="slide-308 ms-image"><img src="https://placehold.jp/1400x360.png" height="360" width="1400" alt="" class="slider-29 slide-308" draggable="false"></li>
<li style="display: block; width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; z-index: 1;" class="slide-344 ms-image"><a href="#" target="_self"><img src="https://placehold.jp/1400x360.png" height="360" width="1400" alt="" class="slider-29 slide-344" draggable="false"></a></li>
</ul>
<ol class="flex-control-nav flex-control-paging"><li><a class="flex-active">1</a></li><li><a>2</a></li><li><a>3</a></li><li><a>4</a></li><li><a>5</a></li></ol>
<ul class="flex-direction-nav"><li><a class="flex-prev" href="#"><</a></li><li><a class="flex-next" href="#">></a></li></ul>
</div>
</div>
</div>
<!--// meta slider-->
あと質問のhtmlソースは</div>の閉じタグがひとつ多いですが、生成された全体のソースコードで閉じタグが多かったり少なかったりしますか？
返信が遅くなってしまい、申し訳有りません。
こちらでginさんのコードをを元に色々と試しました結果、
現象は再現しなくなりました。
ありがとうございました！
詳しく教えてくださり、大変助かりました。
心より御礼申し上げます。
あなたの回答
tips
プレビュー
