【jqueryを設置】ブラウザによって崩れてしまう

質問

いつもお世話になっています。
Firefoxとsafariでカラム崩れしてしまい、どこをなおせばいいかわかりません。
どうすれば崩れないでしょうか？
HTML↓
<div class="slider-wrap">
<div id="main-photo-slider" class="csw">
<div class="panelContainer">

<div class="panel" title="Panel 5">
<div class="wrapper">
<img src="images/tempphoto-1.jpg" alt="temp" />
<div class="photo-meta-data">
New Video on CSS-Tricks<br />
<span>Using Wufoo for Web Forms</span>
</div>
</div>
</div>
<div class="panel" title="Panel 5">
<div class="wrapper">
<img src="images/tempphoto-2.jpg" alt="temp" />
<div class="photo-meta-data">
New Video on CSS-Tricks<br />
<span>Using Wufoo for Web Forms</span>
</div>
</div>
</div>
<div class="panel" title="Panel 3">
<div class="wrapper">
<img src="images/tempphoto-5.jpg" alt="temp" />
<div class="photo-meta-data">
New Video on CSS-Tricks<br />
<span>Using Wufoo for Web Forms</span>
</div>
</div>
</div>
<div class="panel" title="Panel 4">
<div class="wrapper">
<img src="images/tempphoto-5.jpg" alt="temp" />
<div class="photo-meta-data">
New Video on CSS-Tricks<br />
<span>Using Wufoo for Web Forms</span>
</div>
</div>
</div>
<div class="panel" title="Panel 5">
<div class="wrapper">
<img src="images/tempphoto-5.jpg" alt="temp" />
<div class="photo-meta-data">
New Video on CSS-Tricks<br />
<span>Using Wufoo for Web Forms</span>
</div>
</div>
</div>
<div class="panel" title="Panel 6">
<div class="wrapper">
<img src="images/tempphoto-5.jpg" alt="temp" />
<div class="photo-meta-data">
New Video on CSS-Tricks<br />
<span>Using Wufoo for Web Forms</span>
</div>
</div>
</div>

</div>
</div>

<a href="#1" class="cross-link active-thumb"><img src="images/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a>
<div id="movers-row">
<div><a href="#2" class="cross-link"><img src="images/tempphoto-2thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#3" class="cross-link"><img src="images/tempphoto-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#4" class="cross-link"><img src="images/tempphoto-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#5" class="cross-link"><img src="images/tempphoto-5thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#6" class="cross-link"><img src="images/tempphoto-6thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
</div>
</div>
<br clear="all" />
<div style="margin-top:20px;">
<img src="images/tempphoto-2thumb.jpg" alt="temp-thumb" />
</div>
CSS↓
.slider-wrap { width: 1050px; top: 87px; left: 40px; clear: both;
border:solid #fff 0px;}
.stripViewer .panelContainer
.panel ul { text-align: left; margin: 0 15px 0 30px; }
.stripViewer { position: relative; overflow: hidden; width: 1050px; height: 455px; }
.stripViewer .panelContainer { position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 1050px; }
.stripNavL, .stripNavR, .stripNav { display: none; }
.nav-thumb { border: 1px solid black; margin-right: 5px; }
#movers-row { margin: -43px 0 0 62px; }
#movers-row div { width: 10%; float: left; }
#movers-row div a.cross-link { float: right; }
.photo-meta-data { background: url(images/transpBlack.png); padding: 10px; height: 45px;
margin-top: -65px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span { font-size: 13px; }
.cross-link { display: block; width: 62px; margin-top: -14px;
position: relative; padding-top: 15px; z-index: 9999; }

回答No.1

lilillllililili · ベストアンサー

こちらで完全に再現することは出来ませんが、#movers-rowあたりを修正してみてはいかがでしょうか。たとえば、#movers-rowにwidth: 80%; を指定してみるとか。

利用しているライブラリなどの情報をいただけるとこちらでも再現できると思います。

お礼

ありがとうございました！解決しました！

補足

ご回答ありがとうございます＆説明不足ですいません。

今回の問題点はコチラ（http://okwave.jp/qa/q7405950.html）になります。
わかりにくい説明大変申し訳ございませんでした。