请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 278|回复: 11

[css] 看CHROME如何解析CSS!

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-2-4 23:14:52 | 显示全部楼层 |阅读模式

最近完成的一个项目需要做对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下居中出现的异常

chrome下居中出现的异常

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

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

QQ图片.png


想要了解更多更全面的web前段知识,css样式,html教程,数据库教程,word教程,excel教程等等,就到excel学习网www.excelxue.com


回复

使用道具 举报

1

主题

922

帖子

20

积分

注册会员

Rank: 2

积分
20
发表于 2016-3-15 09:48:40 | 显示全部楼层
先收藏再学习,谢谢啦!
回复 支持 反对

使用道具 举报

0

主题

918

帖子

45

积分

注册会员

Rank: 2

积分
45
发表于 2016-3-21 22:45:19 | 显示全部楼层
抱走~老好人
回复 支持 反对

使用道具 举报

1

主题

922

帖子

20

积分

注册会员

Rank: 2

积分
20
发表于 2016-3-26 22:23:57 | 显示全部楼层
谢谢您的分享!
回复 支持 反对

使用道具 举报

0

主题

977

帖子

52

积分

注册会员

Rank: 2

积分
52
发表于 2016-3-29 11:44:15 | 显示全部楼层
顶楼主,帮你顶个贴,我挣个积分
回复 支持 反对

使用道具 举报

1

主题

880

帖子

7

积分

注册会员

Rank: 2

积分
7
发表于 2016-4-4 11:40:19 | 显示全部楼层
赞赞
回复 支持 反对

使用道具 举报

1

主题

880

帖子

7

积分

注册会员

Rank: 2

积分
7
发表于 2016-7-29 21:01:05 | 显示全部楼层
赞一个
回复 支持 反对

使用道具 举报

4

主题

1034

帖子

195

积分

注册会员

Rank: 2

积分
195
发表于 2016-11-5 13:56:04 | 显示全部楼层
顶一个
回复 支持 反对

使用道具 举报

0

主题

890

帖子

54

积分

注册会员

Rank: 2

积分
54
发表于 2018-3-11 17:39:37 | 显示全部楼层
不错,学习了
回复 支持 反对

使用道具 举报

8

主题

1026

帖子

88

积分

注册会员

Rank: 2

积分
88
发表于 2018-6-9 17:22:49 | 显示全部楼层
希望楼主能够收集更多的资料,谢谢了!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2018-12-14 22:52 , Processed in 0.240565 second(s), 36 queries .

快速回复 返回顶部 返回列表