0

我目前有一个运行以下的基础轨道：

     <ul data-orbit>

          <li> 
            <img class="image1" src="../templates/img/image1.jpg" style="width: 100%;       height: 691px; margin: 0 auto;"/>   
          </li>
          <li>
             <img class="image2" src="../templates/img/image2.jpg" style="width: 100%; height: 691px; margin: 0 auto;"/>   
        </li>
         <li>
            <img class="image3" src="../templates/img/image3.jpg" style="width: 100%; height: 691px; margin: 0 auto;"/>   
        </li>
     </ul>

在 Windows 上，浏览器检查正常。但是，在 Mac OS X Safari 上，它显示的是下一个列表项图像，而不是显示整个 100% 宽度。

我猜这与正在显示的图像的实际宽度和高度不是完全相同的大小有关......？

我想尝试解决这个小问题，而不必将所有图像剪切为相同的宽度和高度，因为它仅适用于 mac safari。

我尝试更改foundation.orbit.js 以更改$slides.css（大约第340 行）以读取jquery.safari 并尝试更改其宽度，但它最终只是在safari 上拉伸图像。

谢谢！

4

1 回答 1

0

我注意到在 MAC OS X 中，clientWidth 比它应该的短 1px（1038 而不是 1039px）。

通过强制宽度为1039px !importantsafari 浏览器上的 CSS，它解决了这个问题。
我不知道为什么宽度被强制比它的宽度短 1px，但无论如何。

于 2013-07-22T19:10:10.720 回答