Css - 随笔分类 - 与时俱进

细数那些不能直视的IE6BUG

摘要：1. li在IE中底部3像素的BUG解决方案：在<li>上加float:left；即可解决2. IE6中奇数宽高的BUG。解决方案：就是将外部相对定位的div宽度改成偶数。高度也是一样的。3. IE6文字溢出BUG引发这种BUG有几个条件1.是注释引起的,删除所有注释即可.2.hidden的input直接放在form下.3.display为none的div也有可能引发此bug.4.可以通过外面再包一次DIV解决由注释造成文字溢出，属于IE6的BUG，溢出文字的字数=注释的条数*2-1，这里的字数在中文或英文数字时都成立。注释坐在位置与溢出位置、区块的浮动以及文字区块的固定宽度有必然阅读全文

posted @ 2013-06-14 08:45 与时俱进阅读(725) 评论(5) 推荐(0) 编辑

纯css页面变灰度兼容ie、firefox、chrome、opera、safari

摘要：html {-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);_filter:none;} 阅读全文

posted @ 2013-04-20 20:43 与时俱进阅读(1010) 评论(1) 推荐(0) 编辑

兼容IE与firefox的css 线性渐变（linear-gradient）

摘要：IE系列filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');参数：startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直，为1时代表水平Firefoxbackground: -moz-linear-gradient(top, #FF0000, #F9F900);参数：top、bottom垂直，left、right水平例阅读全文

posted @ 2012-02-14 23:35 与时俱进阅读(7489) 评论(0) 推荐(0) 编辑

css 文本对齐4种方法

摘要：.left { text-align: left; border: 1px dotted black; width: 50%;}.right { text-align: right; border: 1px dotted black; width: 50%;}.center { text-align: center; border: 1px dotted black; width: 50%;}.justify { text-align: justify; border: 1px dotted black; width: 50%;} 阅读全文

posted @ 2012-01-14 11:37 与时俱进阅读(1582) 评论(0) 推荐(0) 编辑

IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

摘要：今日整理网站的 CSS 的时候发现我的网站在 Firefox下面出现了变形的情况,这个时候我急啊.我就到网上找了很多资料,最后发现下面的内容比较实用:熟悉CSS的朋友一定对CSS hack十分了解了，现在IE浏览器、Firefox浏览器、Chrome浏览器、Opera浏览器、Safari浏览器百家争鸣，可苦了我们这些Web前端开发人员了。我在这里稍微整理了一下前面了解的各浏览器的CSS hack，打包奉献一下，哈哈。各浏览器CSS hack兼容表：IE6IE7IE8FirefoxChromeSafari!importantYY_Y*YY*+Y\9YYY\0Ynth-of-type(1)YY代码阅读全文

posted @ 2011-11-30 17:52 与时俱进阅读(582) 评论(1) 推荐(1) 编辑

div下图片自适应解决方法

摘要：我们（特别是像我一样的菜鸟）经常会遇到一个问题——图片自适应。这个问题是很普遍的。在文章区，在论坛，可以这么说：哪儿需要上传图片，哪儿就存在这个问题，而论坛上也不时有人询问。为什么？原因很简单，我们不能要求网页编辑或者你的论坛会员都会裁剪图片或者了解最基本的html代码——尽管这并没有多少技术含量。以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。下面的办法的出现应该感谢伟大的css2.0和更伟大的microsoft（没有它就不必有这么啰嗦的代码了^_^）。本人仅在ie6.0,ff 阅读全文

posted @ 2011-10-05 19:58 与时俱进阅读(1511) 评论(1) 推荐(0) 编辑

input file 文件上传控件隐藏后用button触发它的click事件文件传不上去的解决方案

摘要：<HTML><HEAD><TITLE>upload</TITLE><style><!--.addfileA{ position:relative; cursor:hand; text-decoration:none; background-image: url('C:\WINDOWS\Zapotec.bmp'); width:20px;}.addfileI { cursor:hand; position:relative; left:0px; width:20px; background-color: blue; 阅读全文

posted @ 2011-07-14 21:41 与时俱进阅读(7331) 评论(1) 推荐(0) 编辑

CSS中zoom:1的作用，小标签大作用

摘要：CSS中zoom:1的作用兼容IE6、IE7、IE8浏览器，经常会遇到一些问题，可以使用zoom:1来解决，有如下作用：触发IE浏览器的haslayout解决ie下的浮动，margin重叠等一些问题。比如，本站使用DIV做一行两列显示，HTML代码：<divclass="h_mainbox"><h2>推荐文章</h2><ulclass="mainlist"><li><ahref="#"style="color:#0000FF"target=" 阅读全文

posted @ 2011-07-11 19:44 与时俱进阅读(123770) 评论(3) 推荐(5) 编辑

web开发时碰到的问题以及心得经验

摘要：xml文件尽量以utf-8编码，gb2312有些字是存储不了的，如©,就算能存也需要转换，比较麻烦，utf-8也符合国际规范CSS中:hover这个伪类，如果放在:visited前面则会失效<a>标签如果没有href属性，所有对它的css的伪类如:hover均失效js文件中用document.wirte("<script language='javascript' src='" + file + "'></" + "script>"形式的引用，其file相对阅读全文

posted @ 2011-07-07 09:47 与时俱进阅读(487) 评论(0) 推荐(0) 编辑

个人整理的FF、IE的最基本的CSS兼容技巧

摘要：float的div一定要闭合。例如：(其中floatA、floatB的属性已经设置为float:left;)<wrapper> <div id="floatA"></div> <div id="floatB"></div> <div id="NOTfloatC"></div> </wrapper>这里的NOTfloatC并不希望继续平移，而是希望往下排。这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须阅读全文

posted @ 2011-06-30 09:53 与时俱进阅读(294) 评论(0) 推荐(0) 编辑

On having layout

摘要：On having layout本文修订中当前版本：rev. 7 2007-05-09修订历史各种语言版本目录介绍Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其“layout”得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为“尺寸bug(dimensional bugs)”，意思是这些 bug 可以通过赋予相应元素某个宽度或高度解决。这便引出关于“layout”的一个问题：为什么它会改变元素的渲染特性，为什么它会影响到元素之间的关系？这个问题问得很好，但却很难回答。在这篇文章中，我们专注于这个复杂问题会有那些方面的表现，某一方面的阅读全文

posted @ 2011-06-30 09:41 与时俱进阅读(416) 评论(0) 推荐(0) 编辑

CSS中position的absolute和relative的应用

摘要：之前老弄不明白，只能凭借一点短期内“虐出来的经验”制作需要的效果，后来仔细研究了一下Hutia的XScroller，并且仔细看了文档，才知道这个position属性其实是指本体对上级的定位。如果这么理解，就好办了。默认的属性值都是static，静态。就不用多说了。最关键的是relative（相对）以及absolute（绝对）。往往我们如果是COPY别人的代码，会把absolute属性与left、top配合起来制作相关的“悬浮层”效果。然而有时候我们需要针对某一个容器的悬浮效果，而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦，而且几乎无法完美实现效果。我一开始也无能为力，后来发现只要把其上阅读全文

posted @ 2011-06-30 09:28 与时俱进阅读(351) 评论(2) 推荐(0) 编辑

CSS 排版技巧：上下左右置中、不隨頁面捲動的內容

摘要：大家還記得有一陣子滿流行的網頁廣告，是一張小圖或小區塊在網頁的右上角，當頁面捲動時這個廣告會跟著一起捲動，因此不論頁面捲到哪，廣告都會一直顯示在畫面上、一直都可以看得到。是的，在早期的雅虎奇摩首頁改版之前都還可以看到這樣的廣告呢！在許多其他網站也能看到類似的效果，連小正正 Flash 5 的書的專屬網站都有，只不過那個會跟著一起移動的小區塊放的不是廣告，而是網頁選單。在以往這樣的效果是使用 Javascript 寫出來的，不但程式碼攏長而且有時還會卡卡的，或造成畫面閃爍。現在有了愈來愈強大的 CSS 以及愈來愈好的瀏覽器支援性，只要幾行簡單的 CSS 語法便能製作出同樣的效果。除此之外，使用相阅读全文

posted @ 2011-06-29 16:35 与时俱进阅读(4336) 评论(0) 推荐(0) 编辑

DIV Scroll属性

摘要：DIV Scroll属性详解，为DIV层打造不同的滚动条。一、scrollbar属性、样式详解1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条） overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置以上三个属性设置的值为visible(默认值)、scroll(出现滚动条)、hidden(隐藏)、auto()浏览器自动设置)。2．scrollbar-3d-light-color立体滚动条亮边的颜色（设置滚动条的颜色） scrollbar-arrow-color上下按钮上三角箭头的颜色 scrollbar-base-color滚动条的基本颜阅读全文

posted @ 2011-06-20 09:14 与时俱进阅读(40280) 评论(0) 推荐(1) 编辑

使用css模拟vista毛玻璃效果

摘要：近来Windows Vista的毛玻璃效果一直受到界内同行的争相模仿。小弟不才，也来发表下自己的拙见。首先准备两张背景图片，一张为正常图片，另外一张表现为正常图片的模糊效果。利用css里面对背景的定义，将正常图片设置成为body节点的背景（注意body的margin必须设置为0，不然模糊的图片和正常的图片会有位置偏移），并且设置background-attachment的属性为fixed。接下来在需要应用毛玻璃效果的图片上设置样式，将模糊图片设置为需求节点的背景，同样设置background-attachment的属性为fixed（需求节点的位置最好为绝对定位）。这样模仿Windows Vis 阅读全文

posted @ 2011-06-18 15:39 与时俱进阅读(3223) 评论(0) 推荐(0) 编辑

css实现强制不换行/自动换行/强制换行

摘要：强制不换行div{white-space:nowrap;}自动换行div{word-wrap: break-word;word-break: normal;}强制英文单词断行div{word-break:break-all;} 阅读全文

posted @ 2011-06-16 14:25 与时俱进阅读(280) 评论(0) 推荐(0) 编辑

CSS截取固定长度字符串

摘要：通过CSS截取固定长度的字符串，并添加省略号。可以省去程序中处理字符串长度消耗的时间，但会增加一点服务器流量。可以根据情况衡量使用。CSS样式表如下：overflow:hidden;white-space:nowrap;text-overflow:ellipsis;再给字符串所在容器指定一个宽度，就可以实现超过宽度时自动添加省略号。阅读全文

posted @ 2011-03-08 10:29 与时俱进阅读(2778) 评论(1) 推荐(0) 编辑

实现 IE6 下支持 position-fixed 的 CSS 属性并解决“振动”的问题

摘要：众所周知 IE6 不支持 position:fixed ，这个 bug 与 IE6 的双倍 margin 和不支持 png 透明等 bug 一样臭名昭著。如何让 position:fixed 在 IE6 中工作的？本文所使用的技巧是用了一条 Internet Explorer 的 CSS 表达式 (expression) 。你不可以直接使用该表达式，因为它可能会因为缓存而不更新。解决这一点的最简单的方式是使用 eval 包裹你的语句。如何解决“振动”的问题？显然 IE 有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候，它将重置所有内容并重新渲染页面，这个时候它就会重新处理 CSS 表达阅读全文

posted @ 2011-01-19 15:05 与时俱进阅读(627) 评论(1) 推荐(0) 编辑

Javascript+css 实现网页换肤功能

摘要：原理:通过存取cookie和dom操作调用不同的样式表文件来实现前台换肤.换肤示例下载：sour.rarHtml代码部分:1.要有一个带id的样式表链接,我们要通过操作这个链接来调用不同的href.link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" /2.皮肤选择按钮(后台为每个li添加onclick事件,触发换肤功能)ul id="skin"li id="skin_0" title="灰色"灰色/lili id="skin_1" title="绿色"绿色/lili id="s 阅读全文

posted @ 2010-12-27 20:23 与时俱进阅读(2434) 评论(3) 推荐(1) 编辑

CSS选择器笔记

摘要：一、基本选择器序号选择器含义1.*通用元素选择器，匹配任何元素2.E标签选择器，匹配所有使用E标签的元素3..infoclass选择器，匹配所有class属性中包含info的元素4.#footerid选择器，匹配所有id属性等于footer的元素实例：* { margin:0; padding:0; }p { font-size:2em; }.info { background:#ff0; }p.info { background:#ff0; }p.info.error { color:#900; font-weight:bold; }#info { background:#ff0; }p#i 阅读全文

posted @ 2010-12-04 21:45 与时俱进阅读(754) 评论(0) 推荐(0) 编辑

与时俱进

随笔分类 - Css