解决江湖家居至尊版手机版装修效果图不能自适应屏幕bug

江湖家居V6.0至尊版官方演示站，手机版首页中部装修效果图，使用了 TouchSlide 触屏滑动特效插件，TouchSlide 是纯javascript打造的触屏滑动特效插件，面向手机、平板电脑等移动终端，能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
但是官方演示站手机版首页装修效果图的长宽像素不能自适应屏幕，在手机屏幕像素偏低的手机中浏览，图片样式宽度不能100%满屏，非常不美观，需要找到CSS样式中的不兼容代码，解决这个显示样式的BUG，解决前后对比图如下：

以下是江湖家居手机版模板首页中的HTMl结构，分别是 ".hd" 里面包含ul， ".bd" 里面包含ul，在 /themes/default/mobile/index.html 模板中相关代码如下：


<div id="effectImg" 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>
                                    <li class=""><a href="###">小户型</a></li>
                              </ul>
                     </div>
                     <div class="clear"></div>
            </div>
            <div class="bd">
                     <div class="list_box">
                              <div class="imgList"> <{KT id="4" name="网站首页4F热门案例-风格" city_id=$request.city_id limit="3"}> <a class="img_box" href="<{link ctl='mobile/case:detail' arg0=$item.case_id}>"><img src="<{$pager.img}>/<{$item.thumb}>" /></a> <{/KT}> </div>
                              <a href="<{link ctl='mobile/case'}>" class="more pointcl">查看更多风格</a> </div>
                     <div class="list_box">
                              <div class="imgList"> <{KT id="5" name="网站首页4F热门案例-空间" city_id=$request.city_id limit="3"}> <a class="img_box" href="<{link ctl='mobile/case:detail' arg0=$item.case_id}>"><img src="<{$pager.img}>/<{$item.thumb}>" /></a> <{/KT}> </div>
                              <a href="<{link ctl='mobile/case'}>" class="more pointcl">查看更多空间</a> </div>
                     <div class="list_box">
                              <div class="imgList"> <{KT id="6" name="网站首页4F热门案例-别墅" city_id=$request.city_id limit="3"}> <a class="img_box" href="<{link ctl='mobile/case:detail'  arg0=$item.case_id}>"><img src="<{$pager.img}>/<{$item.thumb}>" /></a> <{/KT}> </div>
                              <a href="<{link ctl='mobile/case'}>" class="more pointcl">查看更多别墅</a> </div>
                     <div class="list_box">
                              <div class="imgList"> <{KT id="7" name="网站首页4F热门案例-小户型" city_id=$request.city_id limit="3"}> <a class="img_box" href="<{link ctl='mobile/case:detail'  arg0=$item.case_id}>"><img src="<{$pager.img}>/<{$item.thumb}>" /></a> <{/KT}> </div>
                              <a href="<{link ctl='mobile/case'}>" class="more pointcl">查看更多小户型</a> </div>
            </div>
      </div>
</div>

下面对CSS样式中的不兼容的代码进行修改，装修效果图能自适应屏幕的宽度，只需要打开 \themes\default\mobile\static\css\style.css 样式表文件，查找如下代码：

.indexTitle{ border-top:0.02rem solid #ff5d4e; border-bottom:0.01rem solid #dedede; background:#fff; height:0.34rem; padding:0 0.1rem;}

把其中 “height:0.34rem” 代码删除即可解决，修改后的代码为：
/*手机版首页触屏滑动装修效果图开始*/
.indexTitle{ border-top:0.02rem solid #ff5d4e; border-bottom:0.01rem solid #dedede; background:#fff; padding:0 0.1rem;}