传播、沟通、分享
« 类别 css 下的文章
IE6 absolute 元素宽度被撑开 bug
症状 当绝对定位元素的子元素被触发hasLayout时，该元素宽度会撑满整个窗口 div div pIE bug/p /div/div .absolute{position:absolute;left:100px;top:100px;border:1px black solid;padding:5px 10px;background-color:yellow;}.inner{#zoom:1;} IE7+正常 IE6则撑满了页面 解决方法 避免触发inner的hasLayout，将zoom:1去除或置为默认值norml .inner{#zoom: normal ;}
巧用:empty解决webkit核心浏览器text-indent的bug
昨天在项目中遇到要在一个输入框中使用缩进的情况，要用text-indent首行缩进2个文字。然后发现在webkit下，在输入框内容为空的时候，光标位置没有缩进，还是在行首，输入任意字符后，缩进才被激活。 HTML代码如下： 1 input type="text" style="text-indent:2em" / 查看demo 这里无论是input元素还是textarea，或是其它设置了contentEditable=”true”的元素，都能必现这个bug。 IE各版本，Firefox均正常，只有chrome和safari等webkit内核的浏览器才有这个问题。 这里百思不得其解，也尝试了很多方法，均无效。 后来和 小李刀刀 、 poor 聊到这个问题，突然想到:empty伪类，立刻测试，果然可以解决——虽然只是曲线模拟解决… 1 input[type="text"]:empty{padding-left:2em;} 然后在chromium社区提交了个bug单，不知道会不会被无视。 PS：Opera在这里也有些小问题，input元素缩进表现正常，textarea元素不支持缩进，cont…
盲人站长深恶痛绝的onfocus=”this.blur()”
杭州最美的季节里，淘宝无障碍访问改善小组有幸邀请到 盲人在线 站长—— 争渡读屏 团队成员—— 杨永全 同 学和我们一起面对面交流网站无障碍访问方面的问题。杨同学使用电脑必须使用读屏软件，就像他看不到我们的脸必须靠声音识别我们一样。在谈到读屏软件操作页 面时，他对我们前端的同学特别的强调：他最深恶痛绝的就是页面链接上有 onfocus=”this.blur()” 这句代码，这从何说起呢？ (图一) 各位同学，看到这句代码有没有觉得眼熟，对的，你懂的，我们常用它来去除链接取得焦点时外围出现的虚线框（如上图一），google一下，前面几十 页谈的都是这个去除虚线框的技巧。但我们也许以前从未想过：我们的这行代码给盲人用户们带来了巨大的困扰：这中断了盲人用户的Tab键路径，导致Tab光 标无法聚焦页面的下一个控制器（链接、表单域、object、image map等）。测试如下： body a href=”#” 第一个链接/a a href=”#” 第二个链接/a a href=”#” onfocus=”this.blur();”第三个链接/a a href=”#” 第四个链接/a a href…
DivCSS教程：CSS透明相关技巧的介绍
这篇汇总主要是提供一些CSS不透明的详细介绍，代码示例和解释，以实现这项有用的CSS技术在您的项目中兼容所有浏览器。更多的技巧欢迎参考52CSS.com上面的技术文档。 关于CSS 透明度，有一点需要注意的是，它虽然使用了很多年，但它一直以来都不是一个标准属性。它是一种非标准技术，应该是CSS3规范的一部分。 一、旧的Opacity设置 以下代码是Firefox和Safari旧版本所需的透明度设置: Example Source Code [www.52css.com] #myElement { -khtml-opacity: .5; -moz-opacity: 0.5; } -khtml-opacity设置是针对旧版本的Webkit渲染引擎，这种专用属性现在已经过时了，除非你还有需要兼容Safari 1.x.的用户。 第二行使用专用属性 -moz-opacity是 为了兼容Mozilla渲染引擎的早期版本，以及追溯到Netscape Navigator。 Firefox 0.9以后就不要求使用-moz-opacity属性，Firefox 3.5（现在使用Geck…
30+ Web下拉菜单
以前给大家介绍过 13个不错的Javascript和CSS的菜单 、 20个优秀的Javascript导航技术 、 30种时尚的CSS网站导航条 ，今天在网上看到一篇文章其收集了30多个下拉菜单（分为两类，jQuery和CSS+Javascript的），转过来。 原文： http://smashinghub.com/3-useful-drop-down-menu-scripts-to-enhance-header-navigation.htm jQuery Smooth Navigation Menu Simple Drop Down Menu Plugin Dropdown, iPod Drilldown, and Flyout styles jQuery and CSS Example Create the Fanciest Drop Down Menu You Ever Saw A Different Top Navigation Simple jQuery Dropdowns Sexy Drop Down Menu with jQuery and CSS How to Crea…
给IE打补丁技巧之CSS Expression
CSS Expression 是自IE5开始提供的特性，虽然因安全性、性能问题臭名昭著，到IE8也终于 寿终正寝 。 回过头看，与XMLHttpRequest一样，CSS Expression的理念确实也有先驱之功，从CSS Expression也可看出由jQuery发扬光大的用CSS selector绑定行为的编程方式的雏形。不过雏形只能是雏形。由于设计上的缺陷，CSS Expression不堪大用，通常只局限为patch一些CSS特性，例如min-width/max-width。 不过CSS Expression在patch IE方面其实还可以发挥更大的功用。Dean Edwards首创了 一次性执行experssion的模式 ，巧妙的利用了IE的内建Selector机制，同时又避免了experssion被反复计算的性能问题。这种模式被许多patch所使用。例如Peter Nederlof的 hover/active/focus伪类补丁 。 但是这个模式仍然有不足。Dean使用的是behavior属性。而单个CSS属性只能被用一次，即在一个元素上，最后根据cascade规则只会有一…
40个很不错的CSS技术
以前发布过《 30种时尚的CSS网站导航条 》，下面是40个CSS的技术，可以让你的网页有更好的用户体验。希望你喜欢 1. A CSS styled table version 2 2. A CSS-based Form Template 3. A Stripe of List Style Inspiration 4. Accessible expanding and collapsing menu 5. Advanced CSS Menu Trick 6. Animated Rollover Arrow 7. Animations 8. Background Size 9. Better Ordered Lists (Using Simple PHP and CSS) 10. Box Shadow 11. Creating a table with dynamically highlighted columns 12. Creating bulletproof graphic link buttons with CSS | 456 Berea Street 13. Creative …
CSS3中动画效果的应用
不少人都已经在用CSS3中的动画了，但很多仅仅用在 某个元素的 hover上 其实，配合脚本的话，可以做到更多的动画效果，并且可以在很大程度上抛弃各种动画库。 先前一博客《 用HTML5代替PPT 》中， 我的各种动画效果就完全使用了CSS3的动画效果而不再使用jQuery的动画了。 点击查看展示 设置CSS *{ -webkit-transition-duration:.15s; -moz-transition-duration:.15s; transition-duration:.15s; -webkit-transition-timing-function:ease-out; -moz-transition-timing-function:ease-out; transition-timing-function:ease-out; } 也就是设置了 所有 动画效果的持续时间为150毫秒，以及动画效果的样式为ease-out。 关于时间 根据我自己亲身实践，我能接受的动画效果时间是在150毫秒附近， 再短觉得一闪而过，再长我就觉得拖沓冗余。 这个150毫秒仅仅是经验参数，没有任何科…
三谈Iframe自适应高度
为什么是三谈 为什么是三谈呢？一是因为这真的是一个被说烂的话题，二是因为太师傅在n年前就写过这篇 再谈iframe自适应高度 。之所以再提该问题，是因为之前项目中确实遇到了这个问题的方方面面，有必要总结一下。希望对各位有帮助，有错误请指正。 同域、子页面高度不会动态增加 这种情况最简单，直接通过脚本获取字页面实际高度，修改 iframe 元素高度即可。但有二点必须注意： 如果页面内有 绝对定位 或者 没有清浮动 的元素，情况有些复杂，不同浏览器处理结果不同，甚至包括 Webkit 内核的浏览器，具体请看这个 Demo 。所以你要么进行浏览器检测，要么用 Math.max 计算一个最大值，要么你想别的方法。 iframe 所包含页面可能非常大，需要很长的加载时间，为此直接计算高度的时候，很可能页面还没下载完，高度计算就会有问题。所以最好在 iframe 的 onload 事件中计算高度。这里还要注意的是，IE下必须使用微软事件模型 obj.attachEvent 来绑定 onload 事件。而别的浏览器直接 obj.onload = function(){} 也可以。 (function…
各浏览器的默认CSS
在丸子主编的帮助下终于找到了各浏览器的默认CSS。只要是由于今天解决了一个特殊的问题，依靠的就是看各浏览器的默认CSS，然后重置它，所以很多时候浏览器的默认css还是很有用的。 各浏览器的默认CSS可以在这里 http://www.iecss.com/ 找到，贪心一下，把这些样式都保存了一份： IE6(下载) IE7(下载) IE8(下载) IE9(下载) Firefox 3.6.3(下载) Webkit (r57042) (下载) Opera 10.51(下载) 当然我们还可以找到更老的一些浏览器默认样式： Firebird 0.7 Firefox 0.8 Firefox 0.9 Firefox 2.0.0.6 Firefox 2.0.0.12 Firefox 3.0b3 Firefox 3.0.1 Firefox 3.0.8 Flock 0.9.0.2 Flock 1.2.4 Flock 1.2.7 Konqueror 3.2.0 Mozilla 1.0.1 Mozilla 1.5 Navigator 6.1 Navigator 7.1 Navigator 8.1 Navigato…
