2011 2011年 7 7日

CSS破解的问题

读了一些博客认为这是很好的未来文献目录...... 也可能是一个重要的面试问题,你会问有一天......

写一个CSS的片段将显示在新的浏览器,在旧的浏览器款有蓝色,红色,在IE6和黑色的绿色IE7中

#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}


2008 10月 10 2008

不是仅限IE浏览器- css的子选择器不工作,在IE浏览器

非IE浏览器的CSS:没有消息,如下面的例子CSS子选择,似乎并不在IE浏览器的CSS开发。

例如DIV>跨度一些CSS,这意味着“当一个span元素的表决元素的子(不是一个孙子或伟大的盛大孩子等)”。

但我们用这种正反向我们的优势。 从历史上看,孩子的选择已被用于隐藏IE 的CSS命令。 简单地html>body任何CSS命令 IE 将忽略它:

html>body .foo { CSS commands go here ;}

这工程,因为<body>总是一个孩子<html> -当然可以永远是一个孙子或曾孙<html>

现在,IE 7的了解孩子的选择,你有大于号后直接插入一个空的注释标记,然后IE 7将不明白这个选择(谁知道这是为什么?),因此会完全忽略这个CSS命令。

html> /**/ body .foo { CSS commands go here ;}

如果尚未看到这些之前,通过以下只读


2008 2008年 10月 4日

消失的HTML / DIV元素在Internet Explorer的[IE浏览器]

像往常一样,多一些奇怪的问题与IE和这个人都必须在TOP 10 IE的怪癖队伍之一。

问题的声明(这是我的问题,也许你也有类似的违法行为):
我有很多的DIV的页面与类“sectionhead”,这只不过是第一个页面上的标题。 所以我有一些这样的风格寻找

,sectionhead {字体大小:18px;背景:#cfcfcf;填充:5PX;}

DIV的是一些黑色文本的浅灰色栏。 在IE浏览器的情况是这些节头显示OK,但也有一些无形的,直到您滚动页面或点击页面上的等东西,有时候他们往往消失,当你点击“ALT”键,当你页面或滚动卷轴。 他们有时似乎再现,当你重新载入(F5)页面。 我与一些简单的风格完全简单的div的行为坏。
什么可能导致这种反常行为呢? 好吧! 坦率地说,不知道!

可能的解决方案:
再不要问我为什么,但这个问题在许多情况下趋于消失,当您添加的位置是:相对的不当行为元素的样式,这样,

,sectionhead {字体大小:18px;背景:#cfcfcf;填充:5PX;位置:相对}

奇怪,但该说些什么呢? 上帝保佑我从IE浏览器!

和DO美国的市场份额,如果你有类似的问题。


2008 06月 20日 二零零八年

空白行/列表项在IE6的问题(李)

如果你曾经使用(或一)垂直菜单列表项(李)标记和CSS,你可能遇到的又一错误在IE浏览器,IE 6之间插入列表项包含块级元素,这些差距,也就是说,如果有任何标记列表项之间的空白。 谢谢,但没有感谢,免费版本的IE 7似乎从这个错误。
如果像我,更多的人,你属于这一带失意的开发商,还必须得到他们的新布局,工作压力太大在IE6,那么这可能证明是有用的。 看看...

样品的标记

<ul id="menu">
<li> <a href="#">首页</ A> </ LI>
<li> <a href="#">关于</ A> </ LI>
<li> <a href="#">服务</ A> </ LI>
<li> <a href="#">组合</ A> </ LI>
<li> <a href="#">帮助</ A> </ LI>
<li> <a href="#">联系我们</ A> </ LI>
</ UL>

您可以创建一些CSS,类似一以下,transfrom到一个垂直的菜单,上面的标记......

示例CSS ...
#菜单{
保证金:0:0;背景:#FF9900;
列表样式类型:无;宽度:150像素;
}
#菜单李{保证金:0;填充:0;}
#菜单的{显示:块;
颜色:#555555;
文字装饰:无;
填充:0均为15px;
线高度:2.5;边境底:1px固体#足协;
}

你会看到的结果...
空

解这个错误......(修改/添加CSS粗体斜体)

#菜单{
保证金:0:0;背景:#FF9900;列表样式类型:无;宽度:150像素;
浮动:左; / *这包含浮动的列表项* /
}
#菜单李{
保证金:0;填充:0;
浮动:左; / *修复* /
宽度:100%; / *在IE6的空白错误* /
}
#菜单{
显示:块;颜色:#555555;
文字装饰:无;
填充:0均为15px;
线高度:2.5;边境底:1px固体#足协;
}

如果上述解决方案亘古不变的似乎工作(IE6的唯一原因)...尝试这种方法,而不是

只需添加额外的IE6的唯一样式标记...

<! - [如果它的IE 7>
<style type="text/css">
#菜单里的{显示:内联块;}
#菜单里的{显示:块;}
</ STYLE>
<[ENDIF] - >


2008 2008年 4月 12日

CSS跨浏览器的最低高度哈克

发布的IE 6,MSIE中一直热情地向我们UI开发人员加入几个标准大多数其他标准的浏览器的CSS属性。 这样一个有用的属性,在“最小高度”。 相当平直向前的财产,不需要长篇大论的解释。 设置最小高度为表决时,它始终保留那一套高度时的内容,房屋占地不到它可以容纳更重要的(不同于单纯的“高度”属性)规模或在CSS的话,它的行为就像一个部门的“高度”设置为“自动”...

不可用性的“ 分高 ”,对于我们差一些开发商,他们仍然需要的CSS代码,还必须努力在IE6,有时能证明表演塞... Donot绝望。

幸运的是,我们有足够的怪癖,在IE中,我们会用出优势,并通过攻击我们的方式来达到我们的目标,即使一师师,虽然它的最小高度在IE6

解决方案1:使用下划线哈克...阅读更多 ]

.box1 {
min-height: 200px;
height:auto;
_height:200px;
}

的HTML: -
<div class="box1">Some dynamic content with variable height ...</div>


解决方案2:使用CSS属性选择哈克

.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}

的HTML: -
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>

CSS属性选择哈克早期THA IE6的浏览器忽略的属性约,选择优势。 注意另一个容器类=“SomeClass的”分工的要求。 只是这个师的阶级属性 presense,覆盖高度歌剧,Mozilla和MSIE7的的汽车,后来。 在IE6,不支持属性约选择,忽略了它。

最小高度为IE6黑客演示



2008 3月 15 2008

可见刺激性通过弹出分部的选择框

在多个场合,同时弹出部门/灯箱/提示页面布局等我们遇到某种形式的选择对象恰好是根据这些弹出分部设计的,它表明通过的情况下...... 毓!!

好吧! 你可以很容易地修复你的Z指数值适当调整FF和IE7。 但好旧(双关语意)IE6的行为并不如预期.... 选择框显示,即使你申请一些大幅高Z指数值,您的弹出司...无赖!!!

有此问题没有修复,但也有,我相信,多一些工作方式解决这个问题,但我在这里要告诉你,我用最简单的解决,这对我来说工作得很好,在最案件....

“隐藏胭脂SELECT显示弹出框当您

你只需在你的脚本片段显示您的弹出,添加一块脚本设置选择框的知名度,以“隐藏”

document.getElementById(“my_select)style.visibilty =”隐藏“。

并记住设置您的弹出部结束

。document.getElementById(my_select“)style.visibilty的”可见“;

,“my_select”是刺激的选择框的ID

希望这有助于...

聚苯乙烯。 有像的ofcourse其他选项你弹出一个IFRAME(大小相同),根据弹出的DIV动态positionining ......这工作得很好,但另外一个DOM元素,脚本和头痛的负载。 我已经使用这个解决方案,如果你需要任何帮助这个选项,不要让我知道。 会很乐意帮助!


2008 2008年 1月 8日

有条件的评论:对于非法入境者只有部分Duex

几个月前,我们看到了,我们怎么可能包括一块的CSS,这将是可见的IE6的唯一( 对于您的非法入境者只有 )。 还有其他的方式实现这一目标,以及。 只要包括一个单独的CSS,具体到你的目标IE浏览器。 这可以实现与什么被称为有条件的评论。

有条件的评论是一种方法来检测浏览器类型和版本。 进行浏览器检测,以确保提交给浏览器的具体内容。 可以使用许多不同的技术进行浏览器检测。 这种方法有几个优势,较早的方法,包括风格切换使用javascript。 要列出重要的几年,将是;

  • 不需要脚本
  • 跨浏览器

我们如何做到这一点?

仅在IE 5中做的东西
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

在所有版本的IE做的东西
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

在所有新的IE浏览器的版本做的东西,IE浏览器5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->

对于更多有条件vartiations,阅读MSDN上的以下信息:
关于有条件的评论


2007 2007年 9月 8日

对于你的非法入境者只有

如果你已经写的,而CSS,你将有经验的时间当你从字面上拉你的头发时,你的CSS布局看,在所有新的浏览器(我的意思是比IE6的浏览器后)的罚款,但IE 6抛出发脾气。 你努力奋斗,以调整你的CSS,但它不起作用......好吧! 尝试这些技巧...

1。 强调哈克: -
由定义,CSS 2.1规范允许下划线(“_”)在CSS标识符。 但是,许多浏览器似乎仍忽略任何标识1进行下划线,但IE浏览器。 这个IE的bug /功能,从而成为一个非常明确的方式来设置IE的CSS属性。 所以请记住, 下划线开始写一个CSS属性是可见的Internet Explorer(所有版本,但IE 7)

#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}

鉴于此,示范底线劈

此外,最小高度为IE6黑客使用下划线砍, 退房


2。 井号(#)哈克: -
如下划线砍,这个人是非法入境OLY太是一个良好的差异,以#开始之前的属性标识符是可见的所有IE版本,IE7中包含的任何其他标准的浏览器是无形的。

.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute; /* For IE only */
#top: 50%; /* For IE only */
#left:50%; /* For IE only */
}

使用本hack已经很好地证明一个跨浏览器的垂直对齐的解决方案,在这篇文章中有一看,发现我们更


3。 为IE6的CSS: -
#my_bad_behaving_div {
/*something for all browsers*/
}
/* Lets use the * html hack so only IE6 reads the rule */
* html #my_bad_behaving_div{
/*something for IE6 only*/
}

这些黑客似乎发送的天堂,没有别的工作......如果这些黑客可以节省你的生活一天,不要忘记把我的咖啡:)


2007 2007年 07月 12日

在IE浏览器在一个透明的分裂mouseover事件

我有这个问题的地方,如果你有一个除法(DIV),和该部门的mouseover事件,有一些很好的理由是透明的(在我的情况下,它需要一些标签上悬停在图像显示这种透​​明的分工),IE浏览器没有触发mouseover事件(工作在FireFox的罚款)。

试过几个选项,其中有许多只是一个绝望的尝试,得到事件触发在IE。 明智的,我认为可能的工作之一是设置背景颜色来划分,并设置不透明度为零......好吧! 力的工作!

最终的解决方案,这似乎并没有打扰我需要的功能是把一个像素,在该部门重复/透明背景图像

...傻! 但现在IE浏览器似乎高兴。


2007 06月 11日 二零零七年

IE6的浮动元素的双缘错误

简单...要纠正这个问题,使用显示:内联。

div {float:left;margin:40px;display:inline;}

如果你有一个div,如浮动元素,你把利润的权利或该元素的左缘时,Internet Explorer 6.0将增加一倍,保证金价值,搞乱了HTML / CSS布局。 为了解决这个问题,只需添加显示:内联,您的浮动元素。


NDK的家 | 表达它 表示唇腭裂 表示Penmenship 表示敬畏 表达自己