ChromeとSafariで発生する現象について【jQuery】
HPのｸﾞﾛｰﾊﾞﾙﾅﾋﾞをﾍﾟｰｼﾞ中央に設置するhtmlを作っています｡
今後ﾒﾆｭｰの増減が発生することがあるとのことで､
以下のJSでliの幅を合計してulの幅にするようにしています｡
(使うのはあまりWEBに詳しくない人なので｡)
が､ChromeとSafariでは少ないwidthになり､ﾒﾆｭｰが2段になってしまいます｡
しかし､1回更新すると本来あるべきｻｲｽﾞになってくれます｡
Firefoxでは発生しないのですが､ChromeとSafariで同現象が起こります｡
色々試してますが､なかなかうまく行きません｡
良いｱﾄﾞﾊﾞｲｽを頂ければ幸いです｡
【HTML】
< nav id="g-nav">
< ul>
< li><a href="">text01</a></li>
< li><a href="">text02</a></li>
< li><a href="">text03</a></li>
< /ul>
< /nav>
【jQuery】
var w_sum = 0
$("#g-nav li").each(function(){
w_sum += $(this).innerWidth(true);
$("#g-nav ul").width(w_sum);
});
【CSS】
#g-nav{
width: 100%;
}
#g-nav ul{
margin: 0 auto;
padding: 0 50px;
}
#g-nav li{
float: left;
height: 32px;
}
#g-nav li a{
color: black;
font-family: lato;
font-size: 110%;
padding: 10px 16px;
text-decoration: none;
}
#g-nav li a:hover{
background-color: #f0f0f0;
}
