0

我使用 Zurb 基础框架制作了这个网站，为了获得导航菜单的手绘设计，我不得不以一种有点迂回的方式来做。这是我实现它的方式： 

<div class="row">
    <div class="large-3 columns">
      <h1><a href="index.html"><img width="100px" height="100px" src="img/logo.png" onmouseover="this.src='img/logo_bold.png'"
onmouseout="this.src='img/logo.png'"></a></h1>
    </div>
    <div class="large-9 columns">
      <ul class="right button-group">

      <li><a href="features.html"><img class="nav_img" src="img/features.png" onmouseover="this.src='img/features_bold.png'"
onmouseout="this.src='img/features.png'"></a></li>
      <li><a href="download.html"><img class="nav_img" src="img/download.png" onmouseover="this.src='img/download_bold.png'"
onmouseout="this.src='img/download.png'"></a></li>
      <li><a href="contact.php"><img class="nav_img" src="img/contact.png"onmouseover="this.src='img/contact_bold.png'"
onmouseout="this.src='img/contact.png'"></a></li>

      </ul>
  </div>
</div>

现在，每当它在 safari 6.0.5 中打开时，导航都会像这样被挤压在一起。对 safari 的解决方法有什么想法吗？

4

1 回答 1

0

它是 中的“触摸事件” custom.modernizr.js。删除它，你就可以开始了。

这是指向相同构建但减去触摸事件的链接：http:
//modernizr.com/download/#-inlinesvg-svg-svgclippaths-shiv-mq-cssclasses-teststyles-prefixes-ie8compat-load

如果您想针对移动/触摸设备进行优化，一项重大改进将是 CSS sprites 而不是 js 翻转。这是一篇关于该主题的过时但很棒的CSS 技巧文章。

于 2013-10-09T23:57:52.737 回答