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中,出现了问题。

时间: 2024-11-03 11:47:55

CHROME对CSS的解析的相关文章

htmlcxx中css文件解析中yyparse有内存泄露,哪位大神能不能帮忙看一下

问题描述 htmlcxx中css文件解析中yyparse有内存泄露,哪位大神能不能帮忙看一下 使用最新版的htmlcxx0.85版,把内部的css解析部分抽出之后,检测出内存泄露

iOS抓取HTML ,CSS XPath解析数据

以前我们获取数据的方式都是使用 AFN 来 Get JSON 数据,比如 点我查看 JSON 数据.http://news-at.zhihu.com/api/4/news/latest 但例如下面的百度贴吧,和豆瓣读书等网站...并不提供我们获取数据的 API 百度贴吧:   百度贴吧数据.png 豆瓣读书: 豆瓣读书数据.png 这时我们可以解析他们的 HTML 来获取我们想要的数据. 工具准备 这时我们需要2个工具,Firefox 和FireBug. 你可以在 http://www.fire

ie6 ie7 ie8 ie9和FireFox Chrome中css区别总结

1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 wid

CSS语法解析

       1.基本语法    CSS的定义是由三个部分构成:选择符(selector),属性(properties)和属性的取值(value).  基本格式如下:  selector { property: value}  (选择符 { 属性:值})  选择符是可以是多种形式,一般是你要定义样式的HTML标记,例如BODY.P.TABLE--,你可以通过此方法定义它的属性和值,属性和值要用冒号隔开:  body { color: black}  选择符body是指页面主体部分,color是控

CSS教程:解析CSS列表样式属性list-style

网页制作Webjx文章简介:平时制作页面中可对属性list-style在list-item对象中常用,但用的都不深.一般都设为none重置整个页面就差不多OK,可能很多人包括本人对属性list-style-type更细节方面的属性并不是很了解,更有可能对属性list-style和属性list-style-type概念会比较模糊,现有必要把它   平时制作页面中可对属性list-style在list-item对象中常用,但用的都不深.一般都设为none重置整个页面就差不多OK,可能很多人包括本人对

解析css中30个最常用的选择器

文章简介:30个最常用css选择器解析. 你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领略css的巨大灵活性. 1. * {    margin: 0;    padding: 0;   } 星状选择符会在页面上的每一个元素上起作用.web设计者经常用它将页面中所有元素的margin和padding设置为0. *选择符也可以在子选择器中使用.

客齐集OEM的CSS解析与开发经验_经验交流

客齐集OEM的CSS解析 这个OEM是客齐集推出来的,如果你有一个域名,那么你就可以定制自已的网站了.由于是要让站工自已定制,所以开放了HTML以及CSS.JS等代码.但默认的CSS是CSS是不能改的. 在写这个CSS时,我尽量用最少的标签,这样很站对CSS不是很熟的站长也可以定制.另外布局时和写CSS时,总的思想的就是从大的到小,从小到细. 这个布局和CSS是一次写成的,没有更改过,所以有一些地主还是可以优化的,这样的代码也不是最优的.但是,这样的布局的CSS是可以让站长定义成各式各样的.一会

CSS IE6/7/8, Firefox, Safari, Chrome, Opera Hack使用简要归纳(转)

网上有很多关于IE6/7/8, Firefox, Safari, Chrome, Opera CSS Hack的文章,但我觉得太过繁杂,要不给出一张看也看不懂的CSS Hack归纳表,要不就是给出一大堆代码说明问题,不便于学习与使用.我根据自己的使用情况来简单地归纳了一下IE6/7/8, Firefox, Safari, Chrome, Opera的CSS Hack使用方法,希望会对大家有用. CSS Hack1:把IE6/7/8与其它浏览器区别开来 在css代码属性值后面加上"\9"

CSS Hack技术介绍及常用的Hack技巧集锦

 一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CSS 代码的过程,就叫CSS Hack. CSS Hack常见的有三种形式:CSS属性Hack.CSS选择符Hack以及IE条件注释Hack, Hack主要针对IE浏览器. 1.属性级Hack:比如IE6能识别下划线"_"和星号" * ",IE7能识别星号"