关注前端开发微信微信号web007007

在ie7中overflow:hidden失效问题及解决方案

在ie7中overflow:hidden失效问题及解决方案

刚一朋友发来一个问题说在IE7 给一个元素加了overflow:hiden确没有效果,同时页面加了一些JS脚本,说是不是JS脚本出了问题,我噜了一眼,觉得CSS应该能解决此问题,于是打开万能的百度,发现同行也有这样的问题,费话不多说解决方案献上 css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法。 问题原因: 当父元素...

阅读全文...

css选择符有哪些?优先级是怎么的?

css选择符有哪些?优先级是怎么的?

1、通配选择符(*),表示页面内所有元素的样式。 * { font-family:Verdana, Geneva, sans-serif; font-size:12px; } 2、类型选择符。是指以网页中已有的标签类型作为名称的选择符,例如body、div、p、span等。 div { font-family:Verdana, Geneva, sans-serif; font-size:12px; } 所有的页面元素都可以作为选择符。 3、群组选择符,如果要对一组对象同时进行相同的样式指派,只需要使用“,”逗号...

阅读全文...

css行内元素有哪些?块级元素有哪些? 盒模型的哪些?

css行内元素有哪些?块级元素有哪些? 盒模型的哪些?

1.内联元素(inline element) * a – 锚点 * abbr – 缩写 * acronym – 首字 * b – 粗体(不推荐) * big – 大字体 * br – 换行 * em – 强调 * font – 字体设定(不推荐) * i – 斜体 * img – 图片 * input – 输入框 * label – 表格标签 * s – 中划线(不推荐) * select – 项目选择 * small – 小字体文本 * span – 常用内联容器,定义文本内区块 * strike – 中划线 * strong – 粗体强调 * sub – 下标 * s...

阅读全文...

xhtml和html的概念与区别

xhtml和html的概念与区别

xhtml的概念 html是超文本链接语言的缩写(HyperText Markup Language)。简单来说html是一种网页语言,我们用它做网页,而且它学习起来很简单。 xhtml呢?X代表“扩展的”,xhtml就是升级版的html语言,他比html更加严谨纯净,学名叫做扩展超文本链接语言(EXtensible HyperText Markup Language)。它是一个W3C标准,用它制作的网页能让更多的浏览器正确的接受并准确显示出来,而且xhtml把许多样...

阅读全文...

border:none;与border:0;的区别

border:none;与border:0;的区别

这问题在网络相信已经有不少人问到,最近再次被牵起讨论,而且在今天的面试中考官也问到了这个问题,所以写一下个的理解,border:none;与border:0;的区别体现有两点:一是理论上的性能差异二是浏览器兼容性的差异。 性能差异: 【border:0;】把border设为“0”像素虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值。 【border:non...

阅读全文...

前端页面有哪三层构成,分别是什么?作用是什么?

前端页面有哪三层构成,分别是什么?作用是什么?

有许多 web 设计师都有为纸质印刷品设计版面的经验。事实上,设计网站时,把网页当做纸质印刷品来对待是最容易想到的思想,除了把白纸换成了屏幕,其他做法没什么两 样。这种做法注定会失败。 Web 是一种不同的媒体。在设计纸质印刷品是时,必须把原始内容和版面设计交织在一起才能看到最终的印刷效果,但在设计网页时,只有将其分离开来才能获得最佳的 结果。 最准确的网页设计思路是把网页分...

阅读全文...

Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?

Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?

声明位于文档中的最前面的位置,处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 该标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。详细请看:http://www.w3school.com.cn/tags/tag_doctype.asp 1. 浏览器模式 当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性。为了实现这一点,他们创建了两种呈现模式:标准模式和混...

阅读全文...

让pre标签自动换行

让pre标签自动换行

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 <pre> 标签的一个常见应用就是用来表示计算机的源代码。对于技术博客经常会用到pre标签输出代码或是代码高亮,而默认情况下,pre 标签中的内容若超出范围不会自动换行。 下面介绍一个方法让 <pre > 标签中的内容自动换行并符合 W3C 标准(多浏览器支持) pre{ whi...

阅读全文...

z-index不生效的原因和解决方法

z-index不生效的原因和解决方法

运行下面代码看看 <div style="z-index:4;width:560px;background-color:Aqua; ">不生效 <a href="http://www.web92.net">www.web92.net</a></div> <div style="z-index:3;width:360px;background-color:Fuchsia; position:absolute;">有效 <a href="http://www.web92.net">www.web92.net</a></div>...

阅读全文...

HTML4和HTML5之间的10个主要不同

HTML4和HTML5之间的10个主要不同

HTML5是最新的HTML标准,或迟或早,所有的web程序员都会发现需要使用到这个最新的标准,而且,很多人都会感觉到,重新开发一个HTML5的网站,要比把一个网站从HTML4迁移到HTML5上容易的多,这是因为这两个版本之间有很大不同之处。 事实上,HTML5并没有对HTML4做什么重大的修改,它们很多东西都是相似的。 可是,其中有一些很重要的区别你需要知道。下面列出的就是一些HTML4和HTML5之间主要的不同...

阅读全文...

4条小建议整理你的CSS

4条小建议整理你的CSS

长期写网站css,尤其是大型网站的人应该都有一个体会,就是希望把css更有条理、有组织的写出来。让自己的css更加标准化。这样不但方便查看,尤其是在网站做进一步拓展开发时,显的尤为重要,减少很多开发工时,也将更便捷。 今天看了一篇相关的国外文章,里面举了一些方法很实用,结合国内的实际情况,整理了一下,来跟大家分享,希望能帮到大家规整化自己的css。有更好建议的朋友也欢迎指出,共...

阅读全文...

HTML特殊符号及其编码对照表

HTML特殊符号及其编码对照表

在HTML编写里会碰到很多特殊的符号,直接打符号有时会出现一些问题,然后我就在网上找了找资料,现在我来分享给大众 以下表格里的是所有HTML特殊符号及其编码对照表: 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 Α &Alpha; &#913; Β &Beta; &#914; Γ &Gamma; &#915; Δ &Delta; &#916; Ε &...

阅读全文...

去掉超链接或按钮点击时出现的虚线边框

去掉超链接或按钮点击时出现的虚线边框

纯CSS去掉超链接或按钮点击时出现的虚线边框 <head> <style type="text/css"> a,input,button{ outline:none; } ::-moz-focus-inner{border:0px;} </style> </head> <body> <a href="http://www.web92.net" target="_blank" title="WEB前端开发网" alt="WEB前端开发网">WEB前端开发网</a>...

阅读全文...

clear:both; 用法 什么时候用

clear:both; 用法 什么时候用

clear:both; CSS手册上这样解释的:该属性的值指出了不允许有浮动对象的边。 这个属性是用来控制float属性在文档流的物理位置的。 当属性设置float(浮动)时,他所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除clear:both; 例子: <p style=”float...

阅读全文...

简单CSS hack:区分IE6、IE7、IE8、Firefox、Opera

简单CSS hack:区分IE6、IE7、IE8、Firefox、Opera

一、跨浏览器的网页设计一直是让人很头疼的问题,这不只是因为浏览器的版本众多,还有一个重要的原因是相同浏览器的不同时期的版本也会有差异,甚至是在不同操作同台上还会有不同。因此使CSS hack技术进行浏览器区分是实现跨浏览器访问一个好方法。CSS Hack技术有很多,具体可以查看: 本文据说的主要是通过“.”,“>”,“*”,“_”来区分。以下是本人对这四种符号的测试结果: ———————IE6—— IE7——...

阅读全文...

flash透明方法—如何将DIV层放在flash上面

flash透明方法—如何将DIV层放在flash上面

有两种:(浏览器不同) 一 。IE浏览器下可用 <param name=”wmode” value=”transparent” /> 二 。firefox下可用 <embed src=”YourFlash.swf” wmode=”transparent” … ></embed> 关于wmode属性资料: (可选)允许使用 Internet Explorer 4.0 中的透明 Flash 内容、绝对定位和分层显示功能。此标记/属性仅在带有 Flash P...

阅读全文...

firefox/IE8+下margin-top绑架父节点的margin的分析

firefox/IE8+下margin-top绑架父节点的margin的分析

margin-top在firefox中会绑架父节点的margin,通俗点说呢,就是子节点的margin-top 设置,有些情况下会被传递给了父节点的margin-top。本来head 和content 在设计的语意上来说,是两上下相邻的。而结果却content节点却被子节点margin-top绑架.问题就这样来了。 很长一段时间里一直也都认为这是firefox的一个bug,但是最近看过一些资料后在想起这事情,其实这是很正常的。 上下两个垂直接触的div ...

阅读全文...

IE6下那只猪[IE6文字溢出BUG]

IE6下那只猪[IE6文字溢出BUG]

先看HTML代码: <pre><div style="width:350px;"> <div style="width: 350px;"></div> <!--–- 我是华丽的注释 -–--> <div style="width: 350px; float: right;">偶就是那只多出来的猪</div> </div> 逐个分析: test-1: 去掉<div style=”float:left;”></div> 中的“float:left”,就会发现...

阅读全文...

IE6|IE7中li底部3px间距BUG

IE6|IE7中li底部3px间距BUG

<!DOCTYPE HTML> <html> <head> <title>IE67li底部3pxBUG </title> <meta http-equiv=”content-type” content=”text/html; charset=gb2312″ /> <style type=”text/css”> *{margin:0;padding:0;} ul{list-style:none;} li{border:1px solid gray;overflow:hidden;width:120px;} li span{float:left;} </style&...

阅读全文...

clearfix清除浮动闭合容器之:after与:before

clearfix清除浮动闭合容器之:after与:before

首先对伪类:before与:after做下注脚 :before 伪元素在元素之前添加内容。 :after 伪元素在元素之后添加内容。 这2个伪元素允许创作人员在元素内容的 最前面/最后面 插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。该二伪类不被IE6/7所支持。 好了,进入正题 在平常我们coding时候经常会发生子元素浮动而引起父级元素不能完全撑开的状况, 可能很多朋友给父...

阅读全文...