江湖家居手机版模板TouchSlide 触屏滑动特效插件显示不正常
江湖家居V6.0至尊版，手机版首页底部热点文章，使用了 TouchSlide 触屏滑动特效插件，在某些手机屏幕分辨率下，标签页（TAB）宽度显示不正确。如此例中浏览器宽度为480PX，标签宽度仅为423px。
模板中相关代码为：
<!--热点文章开始-->
<div id="effectNew" class="mb10">
<div class="tabBox">
<div class="indexTitle">
<h1 class="fl">装修课堂</h1>
<div class="hd fr">
<ul>
<li class="on"><a href="###">装修前</a></li>
<li class=""><a href="###">装修中</a></li>
<li class=""><a href="###">装修后</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="bd">
<div class="hotNews_box mb10">
<ul class="hotNews">
<{KT id="52" name="泗洪爱家网手机版首页推荐装修前文章" city_id=$request.city_id limit='5'}>
<li>
<div class="fl img"><a href="<{link ctl='mobile/article:detail' arg0=$item.article_id}>"><img src="<{$pager.img}>/<{$item.thumb}>" />
<p><{$item.title}></p>
</a></div>
<div class="wz"> <a href="<{link ctl='mobile/article:detail' arg0=$item.article_id}>">
<h3 class="overflow_clear"><{$item.title}></h3>
<p><{$item.desc|cutstr:74}></p>
</a> </div>
</li>
<{/KT}>
</ul>
<a href="<{link ctl='mobile/article:items-16'}>" class="more pointcl">查看更多文章</a> </div>
<div class="hotNews_box mb10">
<ul class="hotNews">
<{KT id="53" name="泗洪爱家网手机版首页推荐装修中文章" city_id=$request.city_id limit='5'}>
<li>
<div class="fl img"><a href="<{link ctl='mobile/article:detail' arg0=$item.article_id}>"><img src="<{$pager.img}>/<{$item.thumb}>" />
<p><{$item.title}></p>
</a></div>
<div class="wz"> <a href="<{link ctl='mobile/article:detail' arg0=$item.article_id}>">
<h3 class="overflow_clear"><{$item.title}></h3>
<p><{$item.desc|cutstr:74}></p>
</a> </div>
</li>
<{/KT}>
</ul>
<a href="<{link ctl='mobile/article:items-17'}>" class="more pointcl">查看更多文章</a> </div>
<div class="hotNews_box mb10">
<ul class="hotNews">
<{KT id="54" name="泗洪爱家网手机版首页推荐装修后文章" city_id=$request.city_id limit='5'}>
<li>
<div class="fl img"><a href="<{link ctl='mobile/article:detail' arg0=$item.article_id}>"><img src="<{$pager.img}>/<{$item.thumb}>" />
<p><{$item.title}></p>
</a></div>
<div class="wz"> <a href="<{link ctl='mobile/article:detail' arg0=$item.article_id}>">
<h3 class="overflow_clear"><{$item.title}></h3>
<p><{$item.desc|cutstr:74}></p>
</a> </div>
</li>
<{/KT}>
</ul>
<a href="<{link ctl='mobile/article:items-18'}>" class="more pointcl">查看更多文章</a> </div>
</div>
</div>
</div>
<script type="text/javascript">TouchSlide({ slideCell:"#effectNew" });</script>
<!--热点文章结束-->
解决方法：查找模板中 <div class="wz">代码，其对应的"wz"类样式表如下，
#index .hotNews li .wz {
margin-left: 0.9rem;
}
把其中的margin-left: 0.9rem; 代码删除。再把"img"类样式表文件中新增 margin-left: 0.9rem; 代码。修改后如下：
#index .hotNews li .img {
width: 0.8rem;
height: 0.6rem;
position: relative;
margin-left: 0.9rem;
}
修改后效果如下：
页:
[1]