- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我为我的 .html 页面添加了渐变背景。似乎适用于大多数浏览器,但我想知道它是否符合标准并符合所有规则。
.css
html {
/* fallback */
background-color: #65a5d1;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#65a5d1));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #fff, #65a5d1);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #fff, #65a5d1);
/* IE 10 */
background: -ms-linear-gradient(top, #fff, #65a5d1);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #fff, #65a5d1);
height: 900px;
}
最佳答案
如果您想生成完全兼容的渐变,您可以查看 Ultimate CSS Gradient Generator :
这是它生成的输出:
/* Old browsers */
background: #1e5799;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMWU1Nzk5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMjk4OWQ4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjMjA3Y2NhIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
/* FF3.6+ */
background: -moz-linear-gradient(45deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
/* Chrome, Safari4+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
/* IE10+ */
background: -ms-linear-gradient(45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
/* W3C */
background: linear-gradient(45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
/* IE6-8 fallback on horizontal gradient */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 );
如您所见,它会生成更多属性以涵盖更多情况。
如果你想支持 IE 9,你必须遵循这个...是的,我知道这很糟糕,但是...
支持 IE9 的完整多点渐变(使用 SVG):
向所有具有渐变的元素添加一个“渐变”类,并将以下覆盖添加到您的 HTML 以完成对 IE9 的支持:
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
关于cross-browser - CSS 中的渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12989961/
在 Firefox 扩展的 Javascript 中,您可以调用 gBrowser.getBrowserForTab但是没有gBrowser.getTabForBrowser .所以我写了自己的并且它
在问这个可能含糊不清的问题之前,我搜索了 SO,发现许多对“现代浏览器”的引用,但没有定义。由于这是一个被广泛使用和引用的术语,令我惊讶的是我在 Internet 上找不到定义甚至描述。 那么,在 2
更新:老问题仅适用于 IE11 预览版;浏览器模式在 IE11 最终版本中回归。但有一个问题:它几乎没有用,因为它不模拟条件注释。例如,如果您使用它们在旧版 IE 中启用 HTML5 支持,您将无法再
我的移动页面和短信有问题:链接。该页面主要由基于 Android 和 iOS 的智能手机通过 QR 扫描应用程序访问。 特别是在 iPhone 上,有一些带有集成浏览器的 QR 应用程序(webkit
我想使用 CustomTabsIntent。但是我没有找到androidx的customTabs路径和版本。 最后我得到了这个:androidx.browser:browser:1.0.0 我想知道正
我想将来自不同域(支付提供商)的 ssl 安全页面加载到 iframe 中。据我所知,一些(或全部?)浏览器会在页面的某些部分受到保护而其他部分不安全时警告用户。 这是真的吗? 如果是这样,如果主站点
在 Protractor 中,有 browser.pause() function : Beta (unstable) pause function for debugging webdriver t
我可以使用以下方法检索浏览器日志 browser.manage().logs().get('browser').then(function(browserLog) { logger.info('
当使用 protractor 时,全局变量 browser 似乎具有 browser.driver 的所有功能。 我特地问这个是因为我不确定是使用 browser.wait 还是 browser.dr
面对 Protractor 的计时问题。有时我的 Protractor 测试用例会因网络或性能问题而失败。我已经解决了 browser.sleep() 的现有问题。后来知道了browser.wait(
我仍然无法找到解决此问题的方法。我们有一个启动浏览器窗口的应用程序,但我们使用的底层第三方插件尚不支持 IE9。我知道我可以通过点击 F12 并选择它来切换到 IE8 的浏览器模式。 有没有办法在命令
在 Protractor 脚本中,我总是遇到超时问题,即使我设置了很大的 time out jasmine interval、allscripttimeout...在某些地方,我不得不等到元素出现,比
我正在运行一个 Angular 应用程序,并且在 Protractor 上测试时尝试获取当前 URL。使用哪一个? browser.driver.getCurrentUrl() 或 browser.g
“所有浏览器兼容”和“跨浏览器兼容”有什么区别? “交叉”是什么意思,是指不同的操作系统吗? 如果任何网站在 IE 7、8 FF 3+、Safari 3+ 的桌面版本上运行良好,我们可以说它是跨浏
不明白浏览器同步中的错误阅读文档,其中 gulp 4 真的没有写任何关于它的内容。在 gulp 4 的文档中也没有理解(异步)。如何解决这个问题。谢谢。 bla bla bla bla bla bla
我正在尝试在 ASP.Net C# 代码隐藏中执行“如果浏览器是 IE 且版本低于 9”。 但是,在 chrome 中,以下行: if (Request.Browser.Browser == "IE"
我第一次玩 watir,使用 this site作为指导。我在一个简单的程序(如下)中遇到错误 - 它在第一个非要求行失败,如图所示。 如果我没有运行下面显示的内容,而是删除了该行,它会打开一个空的
下面的 if 条件我认为它是说 - 如果浏览器是 IE 并且 IE 浏览器版本高于 9,但我没有 IE 9 来测试它,所以很难知道正确的输出,这也是不是 100% 的我想要的 bcos 默认情况下该脚
我通过 Pingdom 测试了我的网站并得到了这个: 我进行了搜索,但找不到解决方案。有谁知道我怎样才能得到这个14到100? 最佳答案 不是一个完整的解决方案,但您可以通过将两个请求合并为一个来改善
是否可以禁用浏览器/窗口之间的 HTML5 拖放功能? 我正在使用具有 native HTML5 拖放功能的 Angular2 应用程序,并希望防止用户将其拖动到浏览器窗口之外并防止将可拖动对象拖放到
我是一名优秀的程序员,十分优秀!