当前位置: 网站建设 > 网页设计 > 建站经验 >

CSS常见问题及小技巧汇总

时间:2013-03-02 03:45来源:未知 作者:admin 点击:

标签:CSS常见问题及小技巧汇总 复制(8)常见问题(12)程序(13)剪贴板(1)汇总(9)CSS(655)代码(82)技巧(106)内容(46)
复制内容到剪贴板 程序代码 a href= pre lang=html line=1 param name=wmode value=transparent / --> [网站建设之]CSS常见问题及小技能汇总 这里使用百分比相对定位,与外补丁负值的办法,负值的大小为其本身宽度高度除以二 五、关于IE6样式中背景图片不缓
CSS常见问题及小技巧汇总》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302333642013.htm
复制内容到剪贴板 程序代码
<a href="
<pre lang="html" line="1">
<param name="wmode" value="transparent" />
--> [网站建设之]CSS常见问题及小技能汇总

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

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

示例:


2,float浮动元素。
float可定位DIV,而设置为float的DIV其margin值在IE下会加倍,CSS常见兼容性问题总结,FF中不会。这样如果设计者对多个浮动的DIV进行了margin设置(如#item1,#item2,CSS常用属性的代码简化实例,#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*/
}

复制内容到剪贴板 程序代码
a{ background:url(images/normal.gif); } a:hover { background:url(images/hover.gif); }


你晓得#box div{...}这样写的含意吗?


 

 

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

一、常见问题

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%

    ,CSS常用优化技巧;假如float元素的宽度之跟正好是100%,某些古老的浏览器将不能畸形显示。因而请保障宽度之和小于99%。

 

复制内容到剪贴板 程序代码 <style type="text/css">
<!--
div {
position:absolute,CSS布局自适应高度解决方法;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>

 

 


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

一、IE6的双倍边距BUG

例如:


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


而你把div去了,那就是说这次是给box赋样式了,那么下面的div基本不指定任何样式,CSS布局的登录表单,所以按css的划定,凑近元素最近的款式将生效!

复制内容到剪贴板 程序代码 <!--[if IE 6]>
<script>
document.execCommand("BackgroundImageCache", false, true);
</script>
<![endif]-->,CSS布局的一些小经验;


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


4,FF中BOX内容能主动伸到页面底部的方式。
在IE中应用height:auto;可使高度随内容增添,而在firefox中高度就成固定的,CSS布局口诀,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;
}
其作用就是解决浮动元素引起父元素无法取得高度的问题。

 

 

Tag:   小技巧   常见问题   CSS     小技巧   常见问题   CSS  

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

复制内容到剪贴板 程序代码
<style type="text/css">
body {margin:0;}
div {float:left; margin-left:10px; width:200px; height:200px; border:1px solid red;}
</style>


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

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


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


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

尺度阅读器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开须要怎么设置呢?方法就是去掉height设置min-height:200px; 这里为了照料不意识min-height的IE6 可以这样定义:


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



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

 

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



如果为超级链接定义上述的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);
如下:


7, 一个设置了边框的容量,CSS属性选择器制作个性化链接样式,如#BOXa{border:#ccc solid 1px;},它里面有浮动元素,拖动转动条时,在IE6,7中有时会涌现边框断线的情形(FF中不会),这时的解决措施是在#BOXa中加一个属性:background:#fff;个别可以解决,CSS属性的缩写
8,仅IE7可以辨认

 

 



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

 


 


(责任编辑:网站建设)
CSS常见问题及小技巧汇总相关文章
上一篇:CSS常见兼容性问题总结 下一篇:CSS常见问题及解决办法
回到顶部