haslayout

hasLayout Block vs. hasLayout Zoom

由 一个人想着一个人 提交于 2019-12-23 20:02:45
问题 I've been going through the online reference of compass when I ran into this page: http://compass-style.org/reference/compass/utilities/general/hacks/ On this page, there apear to be 2 methods to implement a has-layout hack for IE. One of them sets zoom: 1; The other sets display: inline-block; , and then sets it back to display: block; again. What the manual doesn't explain is what's the difference between these two. Is there any difference? Are there particular situations where you would

Image is not clickable inside anchor only in IE7

由 六眼飞鱼酱① 提交于 2019-12-20 10:29:48
问题 Html Structure <a> <span> <!-- Span has width & height --> <img> </span> <span> Some text <span> </a> Anchor is not clickable only in IE7, I know the issue happens because of hasLayout, if we remove height & width of the span, it will work fine. But I need to make it work with out removing height & width. EDIT: You can fiddle with an example here: http://jsfiddle.net/rxcAb 回答1: CSS Only Solution Tomas-I modified your fiddle into a working example. I changed your code to use a span inside the

Block Formatting Contexts, Collapsing Margins and Floating Containers

由 折月煮酒 提交于 2019-12-18 09:23:43
问题 In order to understand what does a block formatting context do, I'm trying to find out what's going on when a BFC is not created. I took the following demo from Everything you Know about Clearfix is Wrong: .wrapper { width: 740px; background: #cccccc; } .leftSidebar { float: left; width: 200px; } .rightSidebar { float: right; width: 200px; } .mainContent { padding-right: 200px; padding-left: 200px; } .floatMe { float: left; background: teal; color: #fff; } <div class="wrapper"> <div class=

Why does Internet Explorer need the “hasLayout” flag?

由 女生的网名这么多〃 提交于 2019-12-18 04:24:16
问题 Like many developers working on web sites for Internet Explorer, I seem to come across a lot of bugs that are caused by the notorious hasLayout flag. I understand what this flag does and how it works (for the most part). A good explanation I read the other day (although I can't find the source) is that hasLayout in IE essentially means "Make this element a rectangle." It's obviously more complicated than that, but it's pretty well summed up with that (in my opinion). What I don't understand

Applying hasLayout to the i element via zoom or inline-block causes it to line break in IE7

由 ↘锁芯ラ 提交于 2019-12-13 03:54:41
问题 I've had to apply hasLayout to the <i> element to avoid an IE7 bug in which sentences with italics obscured images that those sentences were on the same horizontal line as. I've done so using either the zoom property or the display: inline-block property. But now, any phrase in italics causes the italic portion to behave as if it were it's own block... kinda... or, it just doesn't break or wrap like a normal sentence would, in IE7 only. IE8 and FF work normally. Example code: <!DOCTYPE html

webkit “haslayout” bug

由 て烟熏妆下的殇ゞ 提交于 2019-12-12 10:46:49
问题 I have an accordion type thing that has header text. When it is open, it has one padding, and when it is closed, it has another. All of the panels start with their open styles, and then through JS, they are closed. In Chrome and Safari the header text, does not have the closed padding applied. If I view it in the inspector, the correct (open) padding shows as being applied, and when clicking on the actual element in the inspector, I can see where the padding is supposed to be. The only way I

How to stop IE7 clearing floats because of hasLayout

由 ∥☆過路亽．° 提交于 2019-12-10 17:39:51
问题 I have a containing element with a number of floated elements in it. That containing element also has a percentage width value applied to it. In IE7, content following the element containing the floats is cleared because of the width value which gives it hasLayout (I think!). I don't want the containing element to haveLayout, but I do need it to have an explicit width. Is there a way of working around this problem in IE7, effectively forcing hasLayout=false. 回答1: You can fix some haslayout

打败 IE 的葵花宝典：CSS Bug Table

由 不羁的心 提交于 2019-12-04 19:34:55
打败 IE 的葵花宝典：CSS Bug Table 前端技术 | sofish 作为一名前端，我们通常要做的就是让页面在各系统A-Grade浏览器，甚至网站浏览份额0.1%以上的浏览器上良好显示。当然，还有性能问题。不过，今天要说的是样式的兼容问题。在IE/Mozilla/Webkit/Opera四分天下的今天，IE6-9/Mozilla（Gecko）系列/Chrome/Safari/Opera etc. 这些浏览器的兼容，无不让前端们头痛。而在这之中，最让人头痛的当数IE，特别是IE6。搞定了IE6，基本也就能称霸半个江山了。搞定了IE，也相当于占领了7、80%的领地。你想做一个统治页面兼容的主么？反正我是想的。 今天，趁着想完善公司的内部样式框架，把 HasLayout.net 的IE CSS Bug过了一遍。整理中收获了不少东西，一些官方的不足，也根据自己的知识升级了一下。当然，也顺利地升级了框架的一些内容，感觉甚爽。随后，便将一些值得去看的Bug整理成一个列表，基于Alipay前端伟大的分享精神，分享出来以供团队工友们和大家参考。 同时，由于整理仓促，有些理解和表达不当和其他纰漏在所难免，还请大家帮忙更正。谢谢。 问题 浏览器 DEMO 解决方法 Hacking Rules: property:all-ie\9; property:gte-ie8\0;*property

Is it okay to use zoom:1 in my css classes?

由 百般思念 提交于 2019-11-30 16:55:55
问题 Whenever I find IE is displaying my website weird (different from chrome and firefox), I try putting a zoom:1 in the css class for the part that is being displayed weird. A lot of the time this fixes the problem and makes it look consistent with the other browsers. Is it a problem to use zoom:1 ? I know my CSS won't validate, but are there any real world problems that can arise if I rely too much on using zoom:1 ? 回答1: The problem you are fighting with this is the IE hasLayout issue. Here is

Block Formatting Contexts, Collapsing Margins and Floating Containers

由 梦想的初衷 提交于 2019-11-29 17:36:28
In order to understand what does a block formatting context do, I'm trying to find out what's going on when a BFC is not created. I took the following demo from Everything you Know about Clearfix is Wrong : .wrapper { width: 740px; background: #cccccc; } .leftSidebar { float: left; width: 200px; } .rightSidebar { float: right; width: 200px; } .mainContent { padding-right: 200px; padding-left: 200px; } .floatMe { float: left; background: teal; color: #fff; } <div class="wrapper"> <div class="leftSidebar"> <h2>Heading</h2> <pre>.leftSidebar { float:left; width:200px; }</pre> </div> <div class=
订阅 haslayout