![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
DIV CSS
sky水牛
这个作者很懒,什么都没留下…
展开
-
传说中IE6兼容PNG的CSS写法吗?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">#bg {background:url(i/bg.png) no-repeat 0 0;_background:transparent;_filter:原创 2013-07-03 14:25:15 · 289 阅读 · 0 评论 -
如何让“图像域”和“文本输入框”水平…
给“文本输入框”和“图像域”都定义一个CSS,#text_input {height: 16px;width: 133px;margin-right: 5px;padding:0 0 0 3px;border: 1px solid #CCC;color:#36C;}#img_btn {margin:0 0 -4px 0;padding:0px;}maigin i原创 2013-07-03 14:25:58 · 398 阅读 · 0 评论 -
元素的class与ID命名常用关键字
第一种容 器:container/box 头 部:header 主 导 航:mainNav 子 导 航:subNav 顶 导 航:topNav 网站标志:logo 大 广 告:banner 页面中部:mainBody 底 部:footer 菜 单:menu 菜单内容:menuContent 子 菜 单:subMenu 子菜单内容:subMenuC原创 2013-07-03 14:25:28 · 242 阅读 · 0 评论 -
clear:both 的使用
clear:both,表示清除左、右所有的浮动,在接下来的布局中我们还会用这个属性:clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动,如果不清除则会影响banner层位置的设定。<divid="pagebody"><divid="sidebar"><divid="mainbody">以上是页面主体部分,我们在css.原创 2013-07-03 14:25:35 · 341 阅读 · 0 评论 -
list-style-image 无法准确定位的…
这个list-style-image的定位问题也是经常有人问的,解决的办法一般是用li的背景模拟,这里采用相对定位的方法也可以解决.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://w原创 2013-07-03 14:25:50 · 297 阅读 · 0 评论 -
IE6 定义1px左右高度的容器
div {background:red;line-height:1px;}IE6下这个问题是因为默认的行高造成的,解决的方法也有很多例如:overflow:hidden;zoom:0.08;line-height:1px;原创 2013-07-03 14:25:53 · 480 阅读 · 0 评论 -
firefox不显示border的解决办法
主要是float属性引起的,清除float的就可以了。比如:<divid="box_left"><divid="box_right"><divid="box_bottom>这个结构,box_left和box_right左右浮动,box_bottom有border,在IE下显示都是好的,但是Fierfox不显示边框,只要给box_bottom的CSS里加个clear:bot原创 2013-07-03 14:26:05 · 371 阅读 · 0 评论 -
IE6,IE7,IE8,IE9,FIREFOX,Chrome等…
CSS部分div类1. 居中问题div里的内容,IE默认为居中,而FF默认为左对齐可以尝试增加代码margin:auto2.高度问题两上下排列或嵌套的div,上面的div设置高度(height),如果div里的实际内容大于所设高度,在FF中会出现两个div重叠的现象;但在IE中,下面的div会自动给上面的div让出空间所以为避免出现层的重叠,高度一定要控制恰当,或者干脆不写高度原创 2013-07-03 14:26:10 · 403 阅读 · 0 评论 -
解决中文版Chrome下不能显示小于12…
在中文版Chrome里面,网页CSS里所有小于12px的字体设置都无效,最终将显示12px。这样弄的本意可能是好的,因为中文一旦小于12px,就变得不易阅读。但中文版Chrome也会阅读英文网站啊!中文网页里面也会有英文的小字体设置需求啊!尤其是一些文字部份的设计,不小实在不好看,影响整个排版的美观。解决方案,添加一个私有属性到html选择器:html{-webkit-text-si原创 2013-07-03 14:26:35 · 333 阅读 · 0 评论 -
DIV+CSS布局网页页面实现多风格选…
1. styleswitcher.jsfunction setActiveStyleSheet(title) {var i, a, main;for(i=0; (a = document.getElementsByTagName_r("link")[i]); i++) {if(a.getAttribute("rel").indexOf("style") != -1&& a.get原创 2013-07-03 14:25:39 · 303 阅读 · 0 评论 -
不同浏览器CSS Hack写法
区别IE6与FF: background:orange;*background:blue;区别IE6与IE7: background:green !important;background:blue;区别IE7与FF: background:orange; *background:green;区别FF,IE7,IE6: background:oran原创 2013-07-03 14:25:37 · 242 阅读 · 0 评论 -
怎样使一个层垂直居中于浏览器中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"xml:lang="zh" lang="zh"> <headprofile="http原创 2013-07-03 14:25:30 · 427 阅读 · 0 评论 -
DIV布局:IE6下为什么图片下方有空…
解决这个BUG的方法也有很多: 可以是改变html的排版;或者定义img 为 display:block;或者定义vertical-align属性值为vertical-align:top | bottom |middle|text-bottom;还可以设置父容器的字体大小为零 font-size:0;。原创 2013-07-03 14:25:33 · 382 阅读 · 0 评论 -
CSS Hack 汇总快查
屏蔽IE浏览器(也就是IE下不显示)*:lang(zh) select {font:12px !important;}select:empty{font:12px !important;}这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。仅IE7与IE5.0可以识别*+html select {…}当面临需要只针对IE7与IE5.0做样式的时原创 2013-07-03 14:25:41 · 266 阅读 · 0 评论 -
DIV背景图片在Firefox下不显示,IE…
在一个大的div里有2个横列(DIV),并且在大的div里加入背景图片。可是改好后,在Firefox下却无法正确显示背景图片。代码是这样的:1.HTML(样本):<divid="footer_left">Content1<divid="footer_right">Content22. CSS:#footer {width:730px; background-ima原创 2013-07-03 14:25:46 · 378 阅读 · 0 评论 -
CSS兼容:如何解决IE7和IE8的BUG
CSS兼容问题已经是CSS网页布局技术中的重要组成部分,也让广大的CSSer大为头疼,虽然52CSS.com介绍过不少相关的知识与技巧,但是随着IE8的越来越广泛的安装应用,对IE7和IE8的兼容问题,也颇受关注。 在以前的文章中52CSS.com向大家说明,IE8会是福音还是又一个光环 据称全面兼容标准。 今天向大家介绍如何解决IE7和IE8的兼容性问题。 微软在IE原创 2013-07-03 14:25:48 · 345 阅读 · 0 评论 -
IE6双倍边距的解决办法
前言:IE6双倍边距这个问题其实早在学习CSS之初都已经知道如何解决,但当时只知道如何解决而并不知道引起这个BUG的原因是什么,再接下来工作过程中不断实践也终于明白是怎么回事了。但最近开发项目逐渐转移到以IE7为IE的基础参考标准后,逐渐有点淡忘IE6下的一些诡异BUG的解决方案了,就是知道如何解决也忘了部分理论知识了。1、问题:在IE6下如果某个标签使用了float属性,同时设置了其外补丁“原创 2013-07-03 14:26:00 · 352 阅读 · 0 评论 -
最全的CSS浏览器兼容问题
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C的标准,一定要加DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle原创 2013-07-03 14:26:12 · 253 阅读 · 0 评论 -
IE6注释会造成文字溢出的解决办法
原因: 大部分是由注释造成文字溢出,属于IE6的BUG,溢出文字的字数=注释的条数*2-1,这里的字数在中文或英文数字时都成立。注释坐在位置与溢出位置、区块的浮动以及文字区块的固定宽度有必然联系。 解决办法: 1、不放置注释。最简单、最快捷的解决方法; 2、注释不要放置于2个浮动的区块之间; 3、将文字区块包含在新的之间,如:↓这就 是多出来的那只猪;原创 2013-07-03 14:26:40 · 257 阅读 · 0 评论 -
CSS格式(新手)
标签之间用“,” [逗号] 分隔;属性之间用“;” [分号] 分隔;属性值之间用“ ” [空格] 分隔;例如:body,img,ul { margin:0 0 0 0; padding:0 0 0 0; }父子标签之间用 [空格] 分隔;例如:#原创 2013-07-03 14:25:56 · 290 阅读 · 0 评论 -
ul里面如何让li居中
类似这样的效果:设为首页 | 加入收藏 |联系我们如上:要让LI横排,又要让LI居中,开始我用FLAOT,很麻烦,后来发现在CSS里给LI的样式加个:display:inline就可以了,简单吧!原创 2013-07-03 14:26:02 · 490 阅读 · 0 评论 -
firefox不显示body背景图片的解决…
body {background:#F5F5F5 url(../images/a_55.jpg) no-repeat bottomleft;margin:0;padding:0;font-family:"微软雅黑", "宋体", Arial, Verdana, sans-serif;font-size:12px;font-weight:normal;color:#FFF;text原创 2013-07-03 14:26:07 · 369 阅读 · 0 评论 -
.clearfix:after 清楚浮动的详细说…
以下代码可以这么解释:.clearfix:after{ content:"."; display: block; clear:both; visibility:hidden; line-height:0; height:0; font-size:0; }.clearfix原创 2013-07-03 14:26:15 · 376 阅读 · 0 评论 -
li行间距大的问题
li {width:300px; height:23px; line-height:24px:}行距很大行距很大行距很大以上定义后li的行间距应该是23px,但是IE确是28px,多了5个像素,原因不知道,解决方法如下(红色表示测试OK):1.解决li在IE5下产生空白行距的方法:如果li定义了宽度,那么需要在li里面再定义vertical-align:bottom;原创 2013-07-03 14:26:19 · 356 阅读 · 0 评论