CHROME对CSS的解析

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析DNS,个人版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 最近完成的一个项目需要做对Chrome的支持,在这个过程中发现了一个Chrome对于Css解析与FF、IE等的区别,在这里总结一下。 项目的需求是需要在屏幕的中央显示一个提示框,这个对于FF和IE都已经很成熟了,利用负边距能够很容易的实现: 首先看一下页面: CodeDOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.

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

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

首先看一下页面:

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif Code
<!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;}

相关文章
|
2月前
|
自然语言处理 前端开发 API
解析CSS文件
【5月更文挑战第23天】解析CSS文件。在Python中,可以使用一些第三方库来帮助解析CSS文件,例如`cssutils`。
34 2
|
2月前
|
Web App开发 数据采集 JavaScript
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
48 0
|
18天前
|
前端开发 开发者
深入解析CSS样式表的优先级
深入解析CSS样式表的优先级
18 1
|
18天前
|
前端开发 开发者
CSS文本样式全面解析:从基础到进阶
CSS文本样式全面解析:从基础到进阶
16 0
|
21天前
|
Web App开发 移动开发 前端开发
CSS3 三大特性+Chrome 调试代码技巧
CSS3 三大特性+Chrome 调试代码技巧
|
2月前
|
前端开发 JavaScript Java
Java与CSS:解析在Web开发中的协同作用
Java与CSS:解析在Web开发中的协同作用
|
2月前
|
Web App开发 存储 前端开发
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
|
2月前
|
存储 前端开发 算法
【正在完善】高级CSS特效解析其示范案例
【正在完善】高级CSS特效解析其示范案例
139 0
|
2月前
|
Web App开发 存储 前端开发
Chrome 浏览器的隐身窗口(incognito window)功能解析
Chrome 浏览器的隐身窗口(incognito window)功能解析
|
27天前
|
XML Java 数据格式
深度解析 Spring 源码:从 BeanDefinition 源码探索 Bean 的本质
深度解析 Spring 源码:从 BeanDefinition 源码探索 Bean 的本质
28 3

推荐镜像

更多