• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS Grid布局教程之浏览器开启CSS Grid Layout汇总

CSS Grid布局教程之浏览器开启CSS Grid Layout汇总

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS,Grid,浏览器等相关知识,佚名 希望在学习及工作中可以帮助到您

上一篇《CSS Grid布局教程之什么是网格布局》中简单介绍了什么是CSS Grid Layout以及一些概念和术语,为后续学习和使用CSS Grid Layout做了一些铺垫。但浏览器对CSS Grid Layout到目前为止各浏览器厂端支持程度不一致,致使无法全面使用,就算是学习做一些测试示例都还需要做一些设置。那么在这篇文章中,将向大家介绍如何让自己的浏览器支持CSS Grid Layout模块功能。

浏览器兼容性

先来回忆一下几大主流浏览器对CSS Grid Layout模块的支持达到什么样的程度:

从上图不做过多阐述,可以说是一目了然,不过值得欣慰的是,一直不给力的IE,这回却给力了一回,从IE10版本就默认开启了CSS Grid Layout的模块功能。

开启浏览器的CSS Grid Layout模块功能

到目前几大主流浏览器主要包括:

Chrome Safari Internet Explorer Opera Firefox

当然,喜欢追求新东西的同学,还会观注:

Chrome CanaryWebkit NightlyOpera NextFirefox Aurora

除了IE10+默认支持CSS Grid Layout模块功能之外,其他的浏览器Chrome、Safari、Opera和Firefox都需要重新设置(启用开发中的实验性网络平台功能)。

Chrome浏览器

在写这篇文章的时候,我使用的Chrome浏览器版本是“Chrome 38.0.2125.101”。在Chrome浏览器中开启CSS Grid Layout模块功能比较简单,只需要在您的浏览器地址栏中输入:chrome://flags,回车后在列表清单中找到“启用实验性网络平台功能”(#enable-experimental-web-platform-features),一个更为简单的方法,可以直接在浏览器地址栏中输入网址:chrome://flags#enable-experimental-web-platform-features立马定位需要的选项,然后点击“启用”(enable)按钮,如下图所示:

开启之后,记得重启您的浏览器。为了难您已开启成功,你可以在你的浏览器中打开这个Demo。如果您能看到类似下图的效果,表示已开启成功,可以做CSS Grid Layout相关的学习和演示。

Opera浏览器

Opera浏览器开启CSS Grid Layout的方法和Chrome是一样的。在Opera浏览器网址栏中输入opera://flags,并且找到##Enable experimental Web Platform features(或者直接输入opera://flags/#enable-experimental-web-platform-features),点击“开启”按钮:

重启您的浏览器即可使用CSS Grid Layout功能。

注:我测试使用的Opera版本是“Opera25.0.1614.50”。

Safari(Webkit)浏览器

从2014年4月2号开始,在Webkit Nightly中默认内置了CSS Grid Layout模块功能。详细信息可以点击这里了解。

Firefox浏览器

非常遗憾,直到目前为止,我还没有找到如何在Firefox浏览器中开启CSS Grid Layout模块。如果您知道如何在Firefox浏览器中开启相关功能,还请多多指点。

总结

前面主要向大家介绍了哪些浏览器已默认支持CSS Grid Layout模块,并且介绍了如何在Chrome和Opera浏览器中开始CSS Grid Layout模块。当然还有一些遗憾,至今还没有找到如何在Firefox中开启类似功能的方法。不过不用担心,到目前为止,我们至少有四种不同的浏览器(IE10+、Chrome、Opera和Webkit Nightly)可以做相关的演示与测试。

那么在接下来的教程,我们就可以开始学习如何使用CSS Grid Layout来布局。希望大家会喜欢。

您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06css中换行的几种常用方式整理
  • 2017-08-06用网页技术CSS实现网页背景渐变的四种代码设置
  • 2017-08-06一款纯css3实现的非常实用的鼠标悬停特效演示
  • 2017-08-06使用CSS去掉超链接的虚线边框的方法
  • 2017-08-06css实现叶子形状loading效果
  • 2017-08-06纯CSS实现Lavalamp效应的滑动菜单效果
  • 2017-08-06阿里巴巴UED:Alibaba国际站首页改版小结
  • 2017-08-06让DIV块在页面的某个位置固定的css代码
  • 2017-08-06IE bug input 外层浮动的边距问题
  • 2017-08-06CSS中的几个伪元素使用介绍

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS 之dl dt dd模拟表格实例代码
    • 关于CSS属性中visibility隐藏和display消失的区别简析
    • 一些常被你忽略的CSS小知识【必看】
    • CSS实现横向粒子变动加载动画
    • Vertical Text with CSS(用CSS竖向排列文本)
    • 使用CSS3创建动态菜单效果
    • CSS重要属性之float学习心得(分享)
    • IE9的css hack使用示例
    • css使图片变灰的实现方法
    • 纯css3制作网站后台管理面板

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有