Tagged

bug

A collection of 5 posts

bug

巧用:empty解决webkit核心浏览器text-indent的bug

昨天在项目中遇到要在一个输入框中使用缩进的情况,要用text-indent首行缩进2个文字。然后发现在webkit下,在输入框内容为空的时候,光标位置没有缩进,还是在行首,输入任意字符后,缩进才被激活。 HTML代码如下: 查看demo 这里无论是input元素还是textarea,或是其它设置了contentEditable=”true”的元素,都能必现这个bug。 IE各版本,Firefox均正常,只有chrome和safari等webkit内核的浏览器才有这个问题。 这里百思不得其解,也尝试了很多方法,均无效。 后来和小李刀刀、poor聊到这个问题,突然想到:empty伪类,立刻测试,果然可以解决——虽然只是曲线模拟解决… input[type="text"]:empty{padding-left:2em;} 然后在chromium社区提交了个bug单,不知道会不会被无视。 PS:Opera在这里也有些小问题,input元素缩进表现正常,textarea元素不支持缩进,contentEditable=”true”元素和webkit表现一样。

bug

IE bug: 1像素的dotted/dashed边框

最近的一个页面中碰到的,本来想用 border 来模拟设计图的虚线效果,但是很明显 border 效果不如设计图来的好看。顺便研究了下 dashed 和 dotted 的区别。 首先,从字面上来理解,dashed 和 dotted 都是指“虚线”,他们的不同在于: dashed:来自 dash(破折号),由 dash 组成的虚线 dotted:来自 dot (点),由 dot 组成的虚线,也称点线 这里多说几句废话,其实参看下 demo,就能从视觉上获得更直观的感受了。 下面再说说相关的 bug 吧,当然了,这些 bug 再一次只是光荣地出现在了 IE 下,此处涉及到 IE6

bug

IE bug: 消失的绝对定位元素

IE 一如既往地带来问题。真的,我觉得 IE 坚持自己的一套无所谓,不支持或者不完全支持标准也无所谓。但是,IE6 IE7 IE8 这三个版本都有各自不同的表现,实在是太让人难受了。 前两天碰到了这个奇怪的问题: 绝对定位的元素,紧邻着两个浮动元素。Firefox 中一切正常,IE6 中绝对定位元素消失了。本文来自前端观察,转载请以链接形式注明出处。 解决方法:只要别让绝对定位元素紧邻浮动元素就可以了。比如可以在绝对定位元素后面加个空元素。当然,这个空元素是毫无意义的,但是,在 IE 面前,又能怎么样呢? 经过实验,我发现,只要浮动元素的宽度不填满父元素,绝对定位元素就能正常显示,一旦浮动元素的宽度填满父元素,绝对定位元素就会消失。而且,看来,父元素宽度是这种情况发生的临界点。本文来自前端观察,转载请以链接形式注明出处。 另外,这个 demo 里面也存在 IE6 的另一个经典 bug

bug

修正IE6的bug的10个技巧

我们知道,IE6可能过不了多久就会消失了,但是我们还能继续支持这个浏览器并且避免hack和有约束的CSS吗?这里是10个使用有效的HTML和CSS代码来修正IE6主要问题的方法。 1. 使用DOCTYPE 你应该在一直每个HTML文件的头部都使用DOCTYPE,并且我们推荐使用strict 版本,比如: 或者,对于XHTML使用: 你需要处理的最棘手的事情就是IE6进入quirks模式——它已经够诡异了。 2. 设置position: relative 将一个元素设置为”position:relative”可以解决很多问题,特别是你曾经遇到隐藏的或对齐诡异的盒子。显然,你需要非常小心点儿,因为绝对定位的子节点可能会因此重新定位。 3. 将浮动元素设置为display:inline 具有margin属性的浮动元素可能引起著名的IE6双倍margin问题,比如,你为一个元素指定margin-left为5px,但是IE6中实际上却表现为10px。”display:inline”将解决这个问题,尽管这不是必须的,你的CSS仍然是有效的。 4. 将一个元素设置为hasLayout 很多IE6(和IE7)的渲染问题可以通过设置元素的hasLayout来解决。 这是一个IE内部属性(IE隐藏的,更多关于haslayout的资料,可以参阅这里),用来确定相对于其他元素,内容是如何布局和定位的。如果你需要设置一个inline元素(比如一个链接)

bug

使用CSS修正一切:20多个常见Bug及其修正方法

毫无疑问,一个合理的布局和结构是最好选择。这不仅是因为你的布局在不同浏览器见表现不同,而且还因为的CSS有很多方法来布局你的每个元素。今天,我们希望与你们分享一些避免在创建CSS布局时容易遇到的错误的技巧。 IE Bug修正 1- Bug修正:IE双倍Margin bug – 元素是浮动的-并且给元素一个和浮动同一个方向的margin-结果显示两倍的指定margin大小。这个方法非常简单。所有您需要做的就是添加一个display: inline规则到你的浮动元素。所以,你只是把例如这样的代码: #content { float: left; width: 500px; padding: 10px 15px; margin-left: 20px; } 改为如下代码 : #content { float: left; width: 500px; padding: 10px 15px; margin-left: 20px; display:inline; } 2- 克服盒模型hack – 如果你想给任一div指定宽度,不要指定padding或margin。只要另建一个内部(嵌套)的没有宽度的div并设定其padding和margin来替代。所以,不要这样做: