小议使用“完整”的CSS的缺点

1、浏览器支持的不一致性

浏览器的漏洞或缺乏支持的CSS功能,导致不同的浏览器显示出不同的CSS版面编排。例如在微软Internet Explorer6.0的旧版本 ,执行了许多自己的CSS2.0属性,曲解了很多重要的属性,例如:width,height,和float。许多所谓的CSS人员,必须在最热门的或常用的浏览器中达到一致的版面编排。在不同的浏览器中,要达到像素精准的版面编排,有时候是不可能的。

2、CSS没有父层选择器

CSS选择器无法提供元素的父层或继承性,以符合某种程度上的标准。先进的选择器(例如 XPath)有助于复杂的样式设计。然而,浏览器的性能和增加彩现的问题关系著父层选择器,却是CSS的工作群组拒绝建议的主要原因。

3、不能明确地指定继承性

样式的继承性,建立在浏览器中DOM元素的层级和具体的规则上。

4、垂直控制的局限

元素的水平放置普遍地易于控制,垂直控制则非凭直觉性的、较迂回的甚至是不可能的。简单来说,例如:垂直地围绕一个元素、页尾的放置不能高于可见视窗(viewport,视窗或屏幕的可见范围)的底部范围、需要复杂而非凭直觉性的样式规则,或是简单但不被广泛支持的规则。

5、显示的缺乏

目前的CSS没有办法明确又简单的显示属性值(例如:margin-left: 10% - 3em +4px;)。这在很多情况下都是非常有用的,例如:总字段中计算字段的尺寸限制。无论如何,CSS WG发表了CSS局限性的草案,而InternetExplorer 5 以后的版本支持相似功能的语法显示。

6、缺乏正交性 

同样的效果可以用不同的属性来完成,这经常会造成困扰。例如position、display与float定义了不同的配置方式,而且不能有效的交替使用。 一个display: table-cell元素不能指定 float或是position: relative,因为指定float:left的元素不应该受到display效果的影响。再者,没有考虑到新建立属性所造成的影响,例如在表格中你应该使用border-spacing而不是margin-*来指定表格元素。这是因为依照CSS准则,表格内部元素是没有边界(margin)的。

小议使用“完整”的CSS的缺点

时间: 2024-10-29 19:06:52

小议使用“完整”的CSS的缺点的相关文章

CsQuery获取IDomObject元素的完整CSS选择器

一.方法说明 通过IDomObject元素,获取完整的CSS选择器,过滤HTML和BODY元素,自动将class.id添加到选择器上,优先添加class,无class再添加id.如: <html> <head></head> <body> <div id="result"> <h3 class="t"><a "="" href="http://www

DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位教程案例

div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程篇与css sprites实例篇 css sprites拼合背景图片素材实现布局效果截图 一.什么是css sprites   -   TOP css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景.这样做的好处也是显而易见的,因为图片多的话,会增加

解决子级用css float浮动 而父级div没高度不能自适应高度

解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍. 1.首先我们先看HTML源代码: <!DOCTYPE html> <html> <head> <meta cha

CSS中隐藏滚动条的简单实现方法

xhtml中隐藏滚动条 在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个 bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷. 对于这个bug一般有3种解决方案, 方法1: 代码: 程序代码 html { overflow-y: scroll; } 原理:强制显示ie的垂直滚动条,而忽略水平滚动条 优点:完全解决了这个问题, 允许你保持完整的XHTML doctype. 缺点:即

CSS实现居中的7种方法

实现HTML元素的居中 看似简单,实则不然 水平居中比如容易,垂直居中比较难搞定,水平垂直都居中更不容易.在这个响应式布局的年代,很难固定元素的宽高,俺统计了一下,目前的几种方法.本文由浅入深逐个介绍,使用了同一段HTML代码: <div class="center"> <img src="jimmy-choo-shoe.jpg" alt=""> </div> 下面鞋子图片会变化但原始大小始终是500px ×

CSS中隐藏滚动条的方法

xhtml中隐藏滚动条 在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个 bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷. 对于这个bug一般有3种解决方案, 方法1: 代码: 程序代码 html { overflow-y: scroll; } 原理:强制显示ie的垂直滚动条,而忽略水平滚动条 优点:完全解决了这个问题, 允许你保持完整的XHTML doctype. 缺点:即

css隐藏滚动条

xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷.对于这个bug一般有3种解决方案,方法1: 代码如下: html { overflow-y: scroll; } 原理:强制显示ie的垂直滚动条,而忽略水平滚动条优点:完全解决了这个问题, 允许你保持完整的XHTML doctype.缺点:即使页面不需要垂直滚

DIV+CSS虚线边框|CSS虚线下划线及虚线列表教程

DIV CSS虚线教程篇包括讲解常常出现的各种样式的DIV虚线案例CSS教程. 本节为大家介绍常见的CSS 虚线及DIV教程.CSS虚线下划线.列表虚线统统搞定. 目录 CSS虚线边框 CSS超链接虚线下划线 列表型CSS虚线下划线 CSS定义一条水平虚线 1.CSS边框虚线   -   TOP 这里通过边框属性的虚线边框border控制虚线.以下设置的css 高度(css height)和css 宽度(css width)为350像素是为了便于观看演示 其它意思.一.四边为虚线边框border

前端之旅HTML与CSS篇之IE6常见BUG

1.IE6怪异解析之padding与border算入宽高原因:未加文档声明造成非盒模型解析解决方法:加入文档声明<!doctype html> 2.IE6在块元素.左右浮动.设定marin时造成margin双倍(双边距)解决方法:display:inline 3.以下三种其实是同一种bug,其实也不算是个bug,举个例子:父标签高度20,子标签11,垂直居中,20-11=9,9要分给文字的上面与下面,怎么分?IE6就会与其它的不同,所以,尽量避免.1)字体大小为奇数之边框高度少1px解决方法: