元素包含结构如下:

<h1>testing<span>综合评级:<em></em></span></h1>

  CSS,如下

 h1{
background-color:#eeeeee;
color:#b31514;
height:28px;
line-height:28px;
padding:0 28px 0 10px;
font-size:18px;
font-family:"黑体","microsoft yahei";
margin:0 0 10px 0;
}
h1 span{
color:#888888;
font-size:14px;
float:right;
}

  在IE8以上,FF,Chorome表现如下

但是,在IE7却表现如下,出现文字下跌

解决方案:设置浮动元素的,*margin-top:-28px;

这个-28px是根据父元素的高度而来的,看下图

ie7bug,一个块级元素或者一个行内元素里面有个子元素设置向右边浮动,在IE7会出现元素下掉现象!的更多相关文章

  1. html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。

    html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素. 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(霸道,一个块级元素独占一 ...

  2. 1 background(复合属性)与font(复合属性) 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径

    1 background(复合属性)与font(复合属性): background: 颜色  图片的链接  是否平铺  背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小 ...

  3. 【CSS3】---块状元素、内联元素(又叫行内元素)和内联块状元素

    元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1&g ...

  4. 【css】主要的块状元素(block element)和内联元素(inline element行内元素)

      内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用   display可以强制转换行内元素和块状元素,还可以取消显示none   块元素(bloc ...

  5. CSS2系列:BFC(块级格式化上下文)IFC(行级格式化上下文)

    BFC 块级格式化上下文,不好理解,我们暂且把她理解成"具有特殊的一类元素" 哪些元素会生成BFC? 根元素 float属性不为none position为absolute或fix ...

  6. vue通过属性绑定为元素绑定style行内样式

    1.直接在元素上通过:style绑定书写             <h1 :style="{color: 'red','font-size': '40px'}">这是一 ...

  7. 第二章 Vue快速入门-- 16 vue中通过属性绑定为元素绑定style行内样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  8. Vue中通过属性绑定为元素绑定style行内样式

    1.直接在元素上通过:style的形式,书写样式对象 2.将样式对象定义在data中,并直接引用到:style中 3.在:style中通过数组,引用多个data上的样式对象

  9. css position 和 块级/行内元素解释

    一.position 属性: static:元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中. relative:元素框偏移某个距离.元素仍保 ...

  10. [转]CSS块级元素和行内元素

    原地址:http://www.studyofnet.com/news/398.html 本文导读:HTML中的元素可分为两种类型:块级元素和行级元素.这些元素的类型是通过文档类型定义(DTD)来指明. ...

随机推荐

  1. 【JS 逆向百例】元素ID定位加密位置,某麻将数据逆向

    声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除! 逆向目标 目标:某在线麻将 ...

  2. 2020第二届长安杯wp

    1 检材 1 的操作系统版本是 A. CentOS release 6.5 (Final) B. Ubuntu 16.04.3 LTS C. Debian GNU/Linux 7.8 (wheezy) ...

  3. 微信小程序-双线程渲染模型

    微信小程序双线程渲染模型 小程序的运行环境分成渲染层和逻辑层: WXML 模板和 WXSS 样式工作在渲染层,通过 WebView 进行渲染 小程序会为每一个界面都创建一个 WebView 来渲染这个 ...

  4. ChatGenTitle:使用百万arXiv论文信息在LLaMA模型上进行微调的论文题目生成模型

    ChatGenTitle:使用百万arXiv论文信息在LLaMA模型上进行微调的论文题目生成模型 相关信息 1.训练数据集在Cornell-University/arxiv,可以直接使用: 2.正式发 ...

  5. Python 使用XlsxWriter操作Excel

    在数据处理和报告生成的领域中,Excel 文件一直是广泛使用的标准格式.为了让 Python 开发者能够轻松创建和修改 Excel 文件,XlsxWriter 库应运而生.XlsxWriter 是一个 ...

  6. 由刷题学习 heapq

    今日一题是 面试题 17.14. 最小K个数 https://leetcode-cn.com/problems/smallest-k-lcci/ 还好 提示 0 <= len(arr) < ...

  7. 最好的个人博客评论区实现方案推荐:waline

    我的博客一直没有一个好看的评论区,自己做又不会..没错,我是个前端渣渣.调研了一下,一开始想套用一些网上的静态模板,但是改造成本还是挺大的,后来接触到了Waline,简单了解了以下,我就知道了,它就是 ...

  8. 【Matlab】蒙特卡罗法模拟圆周率+对应解析的GIF生成【超详细的注释和解释】

    文章目录 前言 模拟思路 GIF模拟动图的生成 GIF动图生成的基本思路 单张静态图的生成 GIF的生成 尾声 前言 因为博主最近要准备数学建模大赛了,在学习matlab和python之余,博主也会继 ...

  9. 【奶奶看了都会】云服务器ChatGLM模型fine-tuning微调,让你拥有自己的知识库

    1.背景 大家好啊,上次给大家写了ChatGLM-6B的部署使用教程,[奶奶看了都会]云服务器部署开源ChatGLM-6B,让你拥有自己的ChatGPT 但是因为模型比较小的问题,所以日常工作中可能用 ...

  10. JDK + Tomcat 安装 + 制作自定义镜像【第 2.1 篇 Tomcat 日志满问题】

    更好的方法,跨平台(不依赖平台,比如阿里云的后台)的方法是:spring boot 定时任务,直接在程序里写定时清除日志的任务:以后再说: ============================== ...