IT教程 | 加入收藏 | 简体 | 繁体
Bootstrap:Html教程Css教程浏览器兼容手机HtmlBootstrap
当前位置: 首页 > Html+Css > Bootstrap

Bootstrap与Safari浏览器以及浏览器相关功能讲解

2015-01-05来源:[www.121ask.com]热度:0℃ 【字体:

Bootstrap与Safari(谷歌)浏览器以及浏览器相关功能讲解:

Safari 对百分比数字凑整的问题

OS X 上搭载的 v7.1 以前 Safari 和 iOS v8.0 上搭载的 Safari 浏览器的绘制引擎对于处理 .col-*-1 类所对应的很长的百分比小数存在 bug。也就是说,如果你在一行(row)之中定义了12个单独的列(.col-*-1),你就会看到这一行比其他行要短一些。除了升级 Safari/iOS 外,有以下几种方式来应对此问题:

  • 为最后一列添加 .pull-right 类,将其暴力向右对齐
  • 手动调整百分比数字,让其针对Safari表现更好(这比第一种方式更困难)

我们将会继续跟踪此问题,如果有更简易的解决方案,我们会立即更新代码。

模态框、导航条和虚拟键盘

Overflow and scrolling

<body> 元素在 iOS 和 Android 上对 overflow: hidden 的支持很有限。结果就是,在这两种设备上的浏览器中,当你滚动屏幕超过模态框的顶部或底部时,<body> 中的内容将开始随着滚动。

虚拟键盘

还有,如果你正在使用 fixed 定位的导航条或在模态框上面使用输入框,还会遇到 iOS 在页面绘制上的 bug,当触发虚拟键盘之后,其不会更新 fixed 定位的元素的位置。这里有几种解决方案,包括将 fixed 定位转变为 position: absolute 定位,或者启动一个定时器手工修正组件的位置。这些没有加入 Bootstrap 中,因此,需要由你自己选择最好的解决方案并加入到你的应用中。

导航条上的下拉菜单

在 iOS 设备上,由于导航组件(nav)的复杂的 z-indexing 属性,.dropdown-backdrop 元素并未被使用。因此,为了关闭导航条上的下拉菜单,必须直接点击下拉菜单上的元素(或者任何其他能够触发 iOS 上 click 事件的元素)。

浏览器的缩放功能

页面缩放功能不可避免的会将某些组件搞得乱七八糟,不光是 Bootstrap ,整个互联网上的所有页面都是这样。针对具体问题,我们或许可以修复它(如果有必要的话,请先搜索一下你的问题,看看是否已有解决方案,然后在向我们提交 issue)。然而,我们更倾向于忽略这些问题,由于这些问题除了一些 hack 手段,一般没有直接的解决方案。

打印机的视口(viewport)

即使在新版的浏览器上,打印功能仍然有问题。具体来说,从 Chrome v32 版本开始,不管设置的边距(margin)是多少,打印页面时 Chrome 所用的视口(viewport)宽度都比实际的纸张此存窄很多。这就导致 Bootstrap 激活并展示出针对超小屏幕设备的样式。请查看编号 #12078 的 Bug 详情。 我们建议的解决方案:

  • Embrace the extra-small grid and make sure your page looks acceptable under it.
  • Customize the values of the @screen-* Less variables so that your printer paper is considered larger than extra-small.
  • Add custom media queries to change the grid size breakpoints for print media only.

Android stock browser

Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.

Select menus

On <select> elements, the Android stock browser will not display the side controls if there is a border-radius and/or border applied. (See this StackOverflow question for details.) Use the snippet of code below to remove the offending CSS and render the <select> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.

Copy
<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

见 JS Bin 上的 demo。

Validators

In order to provide the best possible experience to old and buggy browsers, Bootstrap uses CSS browser hacks in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren't yet fully standardized, but these are used purely for progressive enhancement.

These validation warnings don't matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don't interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.

Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of X-UA-Compatible <meta> tags to avoid Internet Explorer issues and our inclusion of a workaround for a certain Firefox bug.

以上IT文章《Bootstrap与Safari浏览器以及浏览器相关功能讲解》由名客技术网[www.121ask.com]提供阅读!
名客技术网是一个免费为广大IT技术人员提供IT教程,绿色软件,asp/php/jsp/java/net等实例视频教程,CMS教程,破解软件下载以及学习相关源码、知识的IT网站。
名客技术网如果无意之中侵犯了您的版权,请来电告知,本站将在3个工作日内删除 QQ:175352796
Copyright 2011-2017 Powered by 121ASK.COM, All Rights Reserved.
备案号:鄂ICP备11013833号-1