CHROME对CSS的解析

最近完成的一个项目需要做对Chrome的支持,在这个过程中发现了一个Chrome对于Css解析与FF、IE等的区别,在这里总结一下。

项目的需求是需要在屏幕的中央显示一个提示框,这个对于FF和IE都已经很成熟了,利用负边距能够很容易的实现:

首先看一下页面:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Chrome Position</title>
    </head>
    <body>
        <div id='wrapper'>
            <div id='contentbox'>
                <p>Here is the centered content!</p>
            </div>
        </div>
    </body>
</html>

加入css

<style type='text/css'>
    html { height:100%; }
    body { margin:0px; padding:0px; position:relative; height:100%; }
    #wrapper { width:100%; height:100%; position:relative;; left:0px; top:0px; }
    #contentbox { width:400px; height:400px; border:2px solid green; position:relative; top:50%; left:50%; 
        margin-left:-200px; margin-top:-200px; }
</style>

这样,在FF3、IE6/7中都能,很好的实现水平和垂直居中,而在chrome中,出现了问题。

最后,发现是chrome对于position的解析和其他浏览器不同,加入css hack for chrome后,一切正常。

 body:nth-of-type(1) #contentbox { position:absolute;}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Petrichor的专栏

nano:基本操作

25440
来自专栏贺贺的前端工程师之路

Flex Box布局学习- 兼容

随着自己写过的页面的增多,也遇到了很多CSS兼容性的问题。这些兼容性问题,都是必然的,因为技术在不断进步,不断革新,所谓,“后浪推前浪,前浪拍死在沙滩上”,当然...

9820
来自专栏向治洪

微信小程序实例-摇一摇抽奖

概述 前面我们讲了如何开始微信小程序搭建和一些组件的介绍。微信小组件和微信小程序入门 微信小程序目录 为了更好的理解小程序和小程序开发,我们首先来看一下项目的目...

2.9K100
来自专栏IMWeb前端团队

微型UI库Riot介绍

本文作者:IMWeb 黄龙 原文出处:IMWeb社区 未经同意,禁止转载 定义 Riot:类似 React 的微型 UI 库 特点: 自定义标签 快速...

21090
来自专栏向治洪

微信小程序实例之摇一摇抽奖

概述 前面我们讲了如何开始微信小程序搭建和一些组件的介绍。微信小组件和微信小程序入门 微信小程序目录 为了更好的理解小程序和小程序开发,我们首先来看一下项目的目...

63360
来自专栏前端下午茶

Vue 使用中的小技巧

在vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美的进行开发。下面有一些我在日常开发的时候用到的小技巧,在下将不定期更...

29220
来自专栏腾讯NEXT学位

使用Sublime Text编辑器,你所不知道的11个秘密!

16920
来自专栏macOS 开发学习

Mac OSX 开发基础控件学习之 NSOutlineView

在开发基于osx的Application的过程中,当我们需要显示一组列表结构的数据时,比较容易想到的控件是NSTableView;但如果你显示的数据有层级结构...

23320
来自专栏zhisheng

使用 CodeMirror 打造属于自己的在线代码编辑器

前提 写这个的目的是因为之前项目里用到过 CodeMirror,觉得作为一款在线代码编辑器还是不错,也看到过有些网站用到过在线代码编辑,当然我不知道他们是用什么...

95970
来自专栏韩东吉的Unity杂货铺

零基础入门 21: UGUI Inputfield

因为一些外部原因,以后文章的发布只会在公众号内推送,取消了在蛮牛专栏的文章更新,望蛮牛小伙伴周知,关注微信公众号,可以第一时间收到新分享的推送通知。

36720

扫码关注云+社区

领取腾讯云代金券