HTML12 框架集、IE6png修复、CSS Hack、Hack属性、IE6bug

最新推荐文章于 2021-06-07 14:38:36 发布

ฅ逸魚

最新推荐文章于 2021-06-07 14:38:36 发布

阅读量130

点赞数

分类专栏： HTML+CSS 学习笔记文章标签： css html

本文链接：https://blog.csdn.net/weixin_47186832/article/details/110331839

版权

HTML+CSS 学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1、框架集

定义：
- 框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面
- 框架可以同时引用多个页面，而内联框架只能引入一个
- 在h5标准中，推荐使用框架集，而不使用内联框架
- 使用frameset来创建以一个框架集，注意frameset不能和body出现在同一个页面中
- 所以要使用框架集，页面中就不能有body标签
- 这个是专门用来引入外部页面的，里面不能有自己的东西
- 属性：
  - rows ：指定框架集中的所有框架，一行一行的排列
  - cols :指定框架集中的所有框架，一列一列的排列
- 这两个属性frameset必须选择一个，并且需要在属性中指定每一部分所占的大小
- 在frameset里面可以再嵌套一个frameset
不推荐使用：
- frameset和iframe一样，他里面的内容都不会被搜索引擎所检索，
- 如果搜索引擎检索到的页面是一个框架页的话，它是不能去判断里面的内容的
- 使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面，而我们每单独加载一个页面
- 浏览器都需要重新发送一次请求，引入几个页面就需要发送几次请求，用户的体验感差
- 如果一定要用，建议使用frameset而不使用iframe

<frameset cols="10%,10%,*,50%"><!--*表示剩余的部分 -->
	<!--在frameset中使用frame子标签来指定要引入的页面
    		引入几个页面就写几个frame -->
	<frame src="028 表格.html"/>
    <frame src="023 浮动.html" />
    <frame src="027 背景.html" />
    
    <!--嵌套 -->
    <frameset rows="30%,40%,*">
        <frame src="021 内外边距.html"/>
        <frame src="024 简单的页面布局.html" />
        <frame src="017 RGB颜色值.html" />
    </frameset>
</frameset>

2、IE6png修复

在IE6中对图片格式png24支持度不高，如果使用的图片格式是png24，则会导致透明度效果无法正常显示
- 解决方法：
  - 1、可以使用png8来代替png24，即可解决问题
    - 但是代替之后清晰度会下降
  - 2、使用js代码来解决问题，需要向页面引入一个外部的js文件
    - 然后写代码来解决问题
在body标签最后来引用外部的JS文件
- 再创建一个新的script标签，并且编写一些代码
- div是指修复div里面的内容,用，号连接其他想要修复的标签
- 用*表示任意（全部都修复了）（还有这里的fixed是外部js代码里面的一个名称，并不是固定的）
- 只会在ie6里面执行，其他浏览器不执行

<style type="text/css">
	.box1{
		width:400px;
		height:350px;
		background-image:url(hh.jpg);
		background-repeat:no-repeat;
	}
</style>

<body style="background-color:#bfc;">
<div class="box1"></div>

<!--[if IE 6]>
<script type="text/javascript" src="../JavaScript/基础练习/002 外部脚本路径.js">
</script>
<script type="text/javascript">
	DD_belatedPNG.fixed("div,img");
</script>
<![endif]-->
</body>

3、CSS Hack

有些情况有一些特殊的代码只需要在某些特殊的浏览器中执行，其他浏览器不执行，这时候就要用CSS Hack来解决
- CSS Hack实际上指一个特殊的代码，这段代码只在某些浏览器中识别
- 其他浏览器不能识别
在兼容IE8及以下版本的时候，会单独另立一个样式表。而通过这种方式可以只用在ie版本里面执行
- 而不会影响到其他浏览器
条件Hack，条件和hack只对IE浏览器有效，其他的浏览器都会将它识别为注释
- 这种方式IE10及以上的浏览器已经不支持了
以下只对IE9及以下的浏览器显示
- lt（小于），如果你小于ie9 则显示
- lte 小于等于
- gt 大于
- ！除了

<body>  
 [if IE]>
	 <p>为了您的身心健康，请远离IE6</p>
 <![endif]
 
 <!--如果想要指定的IE版本显示，只需要在后面加上想要显示的版本数就可以了 -->
 <!--以下只对IE6显示，其他的IE5、IE7等都不会显示 -->
 [if IE 6]>
	 <p>为了您的身心健康，请远离IE6</p>
 <![endif]
 
 [if lt IE 9]>
	 <p>为了您的身心健康，请远离IE6</p>
 <![endif]
</body>

4、Hack属性

假设在IE6里面需要将背景颜色设置为黄色才能达到和其他浏览器同样效果
- 希望黄色背景在IE6中生效
- 第一种方法是注释，还有其他方法
下划线：还可以在样式前添加一个下划线，则该样式只有IE6及以下的浏览器才可以识别
*号：只有IE7及以下的浏览器才能识别
\0 ：在样式最后添加\0则只有IE8及以下的浏览器才识别
CSS Hack不到万不得已不要使用

<style type="text/css">
/*在选择器前添加* html 则表示选择器只有IE6才能识别（记住左右两边有空格）*/
	* html body{
		background-color:#bcf;
		_background-color:yellow;
		*background-color:red;
		background-color:yellow\0;	
	}
</style>

5、IE6bug

IE6的双倍边距bug：
- 在IE6中，当为一个向左浮动的元素设置左外边距
- 或者是为一个向右浮动的元素设置右外边距时
- 这个外边距将会是设置值的2倍
添加一个样式来解决这个边距的bug：
- display:inline;
- 对于一个浮动元素来说，设置display:inline;没有任何意义
- 但是该属性可以解决IE6的双倍边距问题
- 有时候就是需要用一个bug去解决另一个bug

<style type="text/css">
*{margin:0;padding:0;}
.box1{
	width:100px;
	height:100px;
	float:left;
	background:#bcf;
	margin-left:100px;
	display:inline;
}
</style>

<body>
<div class="box1"></div>
</body>