文档章节

CSS常见问题小技巧解决办法收集

曾杨
 曾杨
发布于 2013/12/04 11:16
字数 1856
阅读 143
收藏 26

一、常见问题

1、div标签未关闭


 这是书写代码是最为常见的一种错误了。特别是记事本书写习惯的设计师,在未关闭的情况下记事本的不会提示你什么,如果是在DW中,未关闭DIV,开始的DIV会显示灰色,即无效。

2、DOCTYPE声明

  不声明DOCTYPE,或者在文件开始错误声明DOCTYPE,也是一个常见错误。根据一般经验,Strict DOCTYPE是大家追求的最高级验证。Strict validation表明你的网页能够在所有浏览器上都得到最佳展示。
  

3、结尾斜线

  结尾斜线也是造成页面失效比较常见的原因。我们很容易忽略结尾斜线之类的东西,特别是在image标签等元素中。在严格的DOCTYPE中这是无效的。要在img标签结尾处加上“/”以解决此问题。
  

4、图像alt属性

  你可能还没有注意到,图像也是高级验证的潜在绊脚石。除了结尾斜线,高级验证也要求用alt标签来描述图像,如alt="收藏生活,享受生活"。搜索引擎也靠alt标签来识别网页上的图像,所以无论怎样加上alt标签总是好的。

5、未知实体数据

  实体数据是又一个影响验证的易犯错误。我们可以考虑用适当的编码字符来代替“&”等符号。entire list中列出在XHTML版块设计中可用的适当的编码字符实体数据。

6、不良嵌套

嵌套就是元素里又包括元素,如下所示:
我们容易混淆嵌套元素的顺序。例如在div标签前启动strong标签,但又先关闭div标签。这可能不会改变版块布局,但却会使你的版块设计失效。

7、float元素的宽度之和要小于100%

    如果float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

 

-------------------------------------------------------------------------------------------

 

 

 

1,有关DIV居中的问题。
在body中如果设置DIV#box居中的话,用text-align:center;
效果是在IE6中可实现居中,且box中的文字也居中,而在FF中的表现是,文字居中,层box默认居左;为了改变这种差异一般用:
body{margin:auto;} box{margin:auto;}这样在IE6和FF中都一样;


2,float浮动元素。
float可定位DIV,而设置为float的DIV其margin值在IE下会加倍,FF中不会。这样 如果设计者对多个浮动的DIV进行了margin设置(如#item1,#item2,#item3{float:left;margin- left:5px;}),则显示结果在IE下与FF下会有很大差异。解决方案是在这个DIV中加入display:inline;如:
#item1,#item2,#item3
{float:left;
 margin-left:5px; /*ie理解为10px*/
 display:inline; /*ie再理解为5px*/
}


3,ul标签
ul和uo在FF中默认的padding值不为0,在ie中默认的margin值不为0;因此在对UL进行操作之前先定义ul{margin:0; padding:0;},之后对ul时行的设置,在两种浏览器是表现一致的。


4,FF中BOX内容能自动伸到页面底部的方法。
在IE中使用height:auto;可使高度随内容增加,而在firefox中高度就成固定的,BOX里面的子层会溢出。
解决这个问题可以在BOX中加入一个隐藏的层:<div id="clearbox"></div>,这个层做为BOX的最后一个子层,高度自适应问题就可解决。
clearbox定义如下:
.clearbox{
 border-top:1px solid transparent!important;
 margin-top:-1px!important;
 border-top:0;
 margin-top:0;
 clear:both;
 visibility:hidden;
}
其作用就是解决浮动元素引起父元素无法获得高度的问题。


5, 另外,设置 overflow:auto;也可以;
6,当文字和图片在同一行出现时,如何才能使他们在垂直方向居中呢?
  <div id="abc">文字一:<img src="../pic/btn.gif" /></div>
关键在于CSS中对图片文件加上#abc img{vertical-align:middle;}的描述,就可以使它们的中心在同一水平线上了!


7, 一个设置了边框的容量,如#BOXa{border:#ccc solid 1px;},它里面有浮动元素,拖动滚动条时,在IE6,7中有时会出现边框断线的情况(FF中不会),这时的解决办法是在#BOXa中加一个属 性:background:#fff;一般可以解决;
8,仅IE7可以识别


*+html select {…!important;}
=================================


你知道#box div{...}这样写的含义吗?


是指,文档中,以box为ID的元素下边的所有标签名为div的元素!也就是说,它并不是来给box赋样式,而是给box下的那两个div赋样式!(让它俩的字为红色)


而你把div去了,那就是说这次是给box赋样式了,那么下面的div根本没有指定任何样式,所以按css的规定,靠近元素最近的样式将生效!


===========================================


 

 

 

-------------------------------------------------------------------------------------------

 

 

 

 

一、IE6的双倍边距BUG

例如:

复制内容到剪贴板 程序代码 程序代码

<style type="text/css">
body {margin:0;}
div {float:left; margin-left:10px; width:200px; height:200px; border:1px solid red;}
</style>


浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline


二、为什么FF下文本无法撑开容器的高度?

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:

复制内容到剪贴板 程序代码 程序代码
div { height:auto!important; height:200px; min-height:200px; }



三、怎么样才能让层显示在FLASH之上呢?
  
解决的办法是给FLASH设置透明:

复制内容到剪贴板 程序代码 程序代码

<a href="http://www.easyq.net.cn/">:</a>
<pre lang="html" line="1">
<param name="wmode" value="transparent" />



四、怎样使一个层垂直居中于浏览器中?

复制内容到剪贴板 程序代码 程序代码
<style type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>

 
这里使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二

五、关于IE6样式中背景图片不缓存的BUG

示例:

复制内容到剪贴板 程序代码 程序代码

a{ background:url(images/normal.gif); } a:hover { background:url(images/hover.gif); }



如果为超级链接定义上述的css样式以实现鼠标悬浮时的动态效果,在firefox下是没有什么问题的,第一次加载之后,浏览器都会从缓存读取背景图片;

而IE6在这里有一个bug,它每次都从服务器端读取背景图片,结果就是,若服务器反应较慢hover效果就会出现短暂的空白,令人极度不爽。 一直以来都是通过“两张背景图片合并、background-postion控制位置”的方式解决问题的,效果差强人意。

具体来说就是在页面中加入一段简单的javascript脚本,告诉ie6:本地有背景图片的话就不要麻烦服务器了。 document.execCommand("BackgroundImageCache",false,true);

关于这段脚本的放置方式有两种:

1.用CSS,在css中加入如下代码

html {}{ filter: e­xpression(document.execCommand("BackgroundImageCache", false, true)); }

2.用JS:document.execCommand("BackgroundImageCache",false,true);

© 著作权归作者所有

共有 人打赏支持
上一篇: CSS总结
曾杨
粉丝 28
博文 18
码字总数 15807
作品 0
成都
程序员
私信 提问
Bottle文档最新翻译版-1.1一个简单的小教程

1.1 一个简单的教程 这个教程涵盖了Bottle框架里边的基础和一些比较高级的主题,它将会向你介绍框架所包含的概念和功能.你可以从头到尾来阅读它,也可以以后把它作为参考.当然,自动生成的那些个...

铂金小马
2012/12/16
0
0
10个非常不错的CSS技巧

在这里,巧妙的运用CSS的技巧,可以让你不用修改HTML就能得到很好的博客或者模板外观。我收集了一些非常有用的CSS技巧让我们设计博客时更炫更酷。 设计模版和博客主题时,我经常“不断推敲和...

曾沙
2012/09/05
5.5K
12
OPNET网络仿真分析-目 录

版权声明:本书为作者版权所有,仅用于学习,请勿商用 OPENT网络仿真分析 (作者:栾鹏、陈玓玏) OPNET网络仿真分析-目录 OPNET网络仿真分析-电子版 目 录 第一章 OPENT基础 1.1、OPNET简介...

luanpeng825485697
2017/09/14
0
0
CSS兼容性技巧整理--从IE6-IE9 火狐谷歌浏览器兼容

CSS兼容性技巧整理--从IE6-IE9 火狐谷歌浏览器兼容

qycms_cn
2012/09/07
0
30
2018 前端面试准备

前端面试常见问题按知识点分类整理 前端面试常考问题整理,按模块知识点分类,持续完善中... Front-end-Developer-Questions by Modules and knowledge 前端面试经典问题:CSS 中居中的几种方...

掘金官方
2017/12/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

对接比特币钱包的PHP开发包

BtcTool是一个基于第三方服务和离线裸交易实现的PHP比特币应用开发包,适合不希望部署本地 节点旳PHP开发者,开发包主要包含以下特性: 利用第三方服务获取指定地址的utxo集合 离线生成消费裸...

汇智网教程
16分钟前
1
0
【自用】 VHD to VHDX

VHDX: 在VHD 2TB 的基础上提供 64TB的容量。 支持逻辑扇区大小为 4KB,和每块的大小为 256MB,来优化虚拟磁盘性能。 比VHD提供更高的安全性、可靠性和性能。 convert-VHD –path d:\Hyper-v...

Tensor丨思悟
28分钟前
1
0
30 岁转行做Python开发晚吗?而且是零基础

最近有小伙伴问小编,30 岁转行做Python开发晚吗? 小编想说,其实无论男女,只要想学,有这个动力,就直接去行动。无论年龄,无论性别,只要你想一直勇往直前,那么想做的就去做吧~这里有一...

糖宝lsh
39分钟前
10
0
详解Spring中的Profile

前言 由于在项目中使用Maven打包部署的时候,经常由于配置参数过多(比如Nginx服务器的信息、ZooKeeper的信息、数据库连接、Redis服务器地址等),导致实际现网的配置参数与测试服务器参数混淆...

watermelon11
54分钟前
4
0
phper必知必会(二)

  1.说说你对进程,线程以及协程的理解      进程:是系统进行资源分配和调度的基本单位,是基本操作系统结构的基础。进程是程序基本执行的实体。进程与进程之间是独立的,拥有完全独立...

SEOwhywhy
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部