随笔分类 -  CSS前端

如何让层盖住下拉列表框(转)
摘要：首先，我们不得不承认IE7以前的IE系列浏览器对web标准支持的真的很差。IE6的诡异解析模式让一些开始学习web标准的朋友老是碰到不能理解的问题。特别是这个IE6向IE7过渡的是非年代。IE6真的让人很郁闷。但是就目前而言，我们还是不能放弃对IE6的兼容。从下面的我的blog访问统计分析数据来看，使用IE6的还是占有绝对主流的。本来想顺便说说web标准中这个“标准”到底是个什么东西，但是发现，还是明日另起一篇吧。因为这个不是“顺便说说”就能说清楚的。我们今天还是不如这个正题——如何让层盖住下拉列表框？非常郁闷或者非常幸运的说一下：这个问题只会出现IE7之前那些对web标准支持不好的浏览器中（ 阅读全文
posted @ 2011-06-03 11:17 俗雅冰山
再发些CSS常用技巧和兼容方案
摘要：基本上配合我以前所发的：Html+css小技巧收集，制作网页中经常 .. 和浏览器兼容性测试工具 可以做到所向无敌。 CSS HACK以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) CSS代码 引用 <style> #wrapper { width: 100px!important; /* IE7+FF */ width: 80px; /* IE6 */ } </style> 2, IE6/IE77对FireFox 阅读全文
posted @ 2011-06-01 16:28 俗雅冰山 阅读(197) 评论(0) 推荐(1)
网页PNG透明支持(IE6、IE7、firefox下测试通过
摘要：IE6不支持PNG半透明图片的缺陷为web设计带来了极大的不便，之前曾经介绍过用滤镜+hack的方法实现显示PNG，不过实现起来相当繁琐。还有一种网上比较流行的方法，更加简便，下面详细介绍这种方法：把以下代码保存为correctpng.js function correctPNG(){ for(var i=0; i<document.images.length; i++) { var img = document.images[i] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3, im 阅读全文
posted @ 2011-06-01 16:27 俗雅冰山 阅读(231) 评论(0) 推荐(0)
网页(html)中的文字竖排效果
摘要：<html><head><title>文字竖排</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css"><!-- td { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.6em; color: #66 阅读全文
posted @ 2011-06-01 16:26 俗雅冰山 阅读(1012) 评论(0) 推荐(0)
去掉a标签边框
摘要：方法1(批量处理)：CSS样式：a {blr:expression(this.onFocus=this.blur())}方法2（单个处理）: 去掉链接上的虚线框可以在链接里面加入onfocus="this.blur();"就可以去掉虚线框了方法3（批量处理）：先制作一个HTM页： <HTML> <HEAD> </HEAD> <style> a,button { behavior:url(select.htc); } </style> <BODY> <a href="#"> 阅读全文
posted @ 2011-06-01 16:22 俗雅冰山 阅读(4285) 评论(0) 推荐(0)
宽度自适应实现方法（转）
摘要：一、前言在如今各个分辨率显示器N足鼎立的时期，页面采用流动性布局（亦可称自适应布局）不失为一个好选择。当然，具体实现不是那么容易，需要一定的css功力和实践经验。本文不讲细节，只讲外部的自适应架构，这也是实现整个页面自适应的前提。目前为止，我所熟知的左中右三栏宽度自适应于浏览器的方法有三个：绝对定位法，margin负值法以及自身浮动法。这些方法简洁实用，且无兼容性问题。如果您想在您的页面上使用流动性布局，相信本文给您一些启示的。二、三种方法为了演示的需要，首先限定下示例的布局结构：左中右三栏布局，左右两栏宽度固定（要想不固定将宽度值改为百分值即可），中间栏宽度自适应。左右两栏的宽度为200像素 阅读全文
posted @ 2011-06-01 16:21 俗雅冰山 阅读(505) 评论(0) 推荐(0)
CSS中隐藏滚动条的方法
摘要：xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候，默认会水平和垂直滚动条会一起出现，这是ie6的一个bug，在firefox上是正常的，出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷.对于这个bug一般有3种解决方案，方法1:代码：程序代码html { overflow-y: scroll; }原理：强制显示ie的垂直滚动条，而忽略水平滚动条优点：完全解决了这个问题, 允许你保持完整的XHTML doctype. 缺点：即使页面不需要垂直滚动条的时候也会出现垂直滚动条。方法2:(推荐采用)代码：程序代码html { overflow-x: 阅读全文
posted @ 2011-06-01 15:04 俗雅冰山 阅读(87496) 评论(0) 推荐(2)
CSS容器内容超出(溢出)自动换行代码(支持多浏览器)
摘要：完美支持IE，Firefox，Opera等浏览器。 <style type="text/css"> .linebr { clear: both; /* 清除左右浮动 */ width: 100px; /* 必须定义宽度 */ word-break: break-word; /* 文本行的任意字内断开 */ word-wrap: break-word; /* IE */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP printers */ white-space 阅读全文
posted @ 2011-06-01 15:02 俗雅冰山 阅读(4553) 评论(0) 推荐(0)
align=absMiddle
只有注册用户登录后才能阅读该文。
posted @ 2011-06-01 14:36 俗雅冰山 阅读(23) 评论(0) 推荐(0)
解决DIV+CSS设计在IE6/IE7/IE8/火狐-兼容性问题
摘要：在网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV CSS设计的网，就应该更注意IE6 IE7 FF对CSS样式的兼容，不然，你的网乱可能出去不想出现的效果！所有浏览器 通用height: 100px;IE6 专用_height: 100px;IE6 专用*height: 100px;IE7 专用*+height: 100px;IE7、FF 共用height: 100px !important;一、CSS 兼容以下两种方法几乎能解决现今所有兼容.1, !important (不是很推荐，用下面的一种感觉最安全)随着IE7对!important的支持, !import 阅读全文
posted @ 2011-05-31 16:32 俗雅冰山 阅读(870) 评论(0) 推荐(0)
关于X-UA-Compatible
摘要：关于X-UA-Compatible目前绝大多数网站都用<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >来作为IE8的兼容方法，虽然微软将IE向标准迈进了一大步，而事实上IE8还存在一系列渲染的奇怪现象是不争的事实。谁让IE6那么多呢，或许2014年以后我们可以有更多的时间去关心IE8，而不是IE6或者IE7。在X-UA-Compatible中可用的方法有：<meta http-equiv="X-UA-Compatible" content=&qu 阅读全文
posted @ 2011-04-28 17:57 俗雅冰山 阅读(3870) 评论(2) 推荐(0)