针对一个div里面的很多div使用了wihte-space：nowrap样式之后，如何让div之间的间距在所有的浏览器都一样！

Question

有一个div，里面放了很多div，针对这个div设置wihte-space：nowrap样式，如何让里面div之间的间距在各浏览器都一样！
<div id="trdvd" onselectstart="return false">

      <div class="selectimg" style="background-image:url(tp/kp/1s.jpg)" ></div>
      <div style="background-image:url(tp/kp/5s.jpg)"></div>
      <div style="background-image:url(tp/kp/2s.jpg)"></div>
      <div style="background-image:url(tp/kp/3s.jpg)"></div>
      <div style="background-image:url(tp/kp/4s.jpg)"></div>
      <div style="background-image:url(tp/kp/6s.jpg)"></div>
      <div style="background-image:url(tp/kp/7s.jpg)"></div>
      <div style="background-image:url(tp/kp/8s.jpg)"></div>
      <div style="background-image:url(tp/kp/9s.jpg)"></div>
    </div>

#trdvd {

margin-top: 5px;
width: 100%;
height: 84px;
     white-space:nowrap;

-moz-user-select:none;/火狐/
-webkit-user-select:none;/webkit浏览器/
-ms-user-select:none;/IE10/
-khtml-user-select:none;/早期浏览器/
user-select:none;

overflow-x: auto;
overflow-y: hidden;

}

trdvd div{

width: 69.4px;
height: 60px;
display: inline-block;

}
在火狐浏览器里面div之间的间距为4点多px,在谷歌浏览器里面间距为8px,如何让他们一样！

Answer 1

trdvd {

margin-top: 5px;
width: 100%;
height: 84px;

  -moz-user-select:none;/*火狐*/

-webkit-user-select:none;/webkit浏览器/
-ms-user-select:none;/IE10/
-khtml-user-select:none;/早期浏览器/
user-select:none;
font-size: 0;
white-space: nowrap;
overflow-x:auto;
overflow-y: hidden;

}

trdvd div{

width: 69.4px;
height: 60px;
display: inline-block;

}
.first{

margin-left: 8px;

}
//html代码
<div id="trdvd" onselectstart="return false">

      <div class="selectimg" style="background-image:url(tp/kp/1s.jpg)"  ></div>
      <div style="background-image:url(tp/kp/5s.jpg)" class="first"></div>
      <div style="background-image:url(tp/kp/2s.jpg)" class="first"></div>
      <div style="background-image:url(tp/kp/3s.jpg)" class="first"></div>
      <div style="background-image:url(tp/kp/4s.jpg)" class="first"></div>
      <div style="background-image:url(tp/kp/6s.jpg)" class="first"></div>
      <div style="background-image:url(tp/kp/7s.jpg)" class="first"></div>
      <div style="background-image:url(tp/kp/8s.jpg)" class="first"></div>
      <div style="background-image:url(tp/kp/9s.jpg)" class="first"></div>
    </div>
   //js代码
   function tabkp() {
var divss = $("trdvd").getElementsByTagName('div');
var divs = $("trdvu").getElementsByTagName('div');
// ����ÿһ��ҳǩ�Ҹ����ǰ����¼�
for (var i = 0; i < divss.length; i++) {
    divss[i].id = i;
    divss[i].onmouseover = function fc() {
        changeOptioncp(this.id);
    }
}

function changeOptioncp(curIndex) {
    for (var j = 0; j < divss.length; j++) {
        if(j==0){ divss[j].className = '';
        divs[j].style.display = 'none';}
        else{ divss[j].className = 'first';
        divs[j].style.display = 'none';}
       
    }
    // ������ʾ��ǰҳǩ
    if(curIndex==0){ divss[curIndex].className = 'selectimg ';
    divs[curIndex].style.display = 'block';}
   else{ divss[curIndex].className = 'selectimg first';
    divs[curIndex].style.display = 'block';}
}

}
tabkp();
问题已解决！