`

div css 居中 border

 
阅读更多

IE与FF浏览器之间的一些重要差异：

·IE与FF的居中方式不一样。

（1）如何让body体能够在IE与FF浏览器中都居中的例子：

[html] view plaincopyprint?
  1. <html>  
  2.     <head>  
  3.         <title>让body容器在浏览器中居中</title>  
  4.         <link rel="stylesheet" type="text/css" href="body_center.css">  
  5.     </head>  
  6.   
  7.     <body>  
  8.         <div id="container">  
  9.   
  10.         </div>  
  11.     </body>  
  12. </html>  

body_center.css文件：

[html] view plaincopyprint?
  1. body {  
  2.       margin:0px;  
  3.       padding:0px;  
  4.       font:12px arial,宋体;  
  5.       text-align:center;  
  6. }  
  7.   
  8. #container {  
  9.       margin:0 auto;  
  10.       width:90%;  
  11.       height:500px;  
  12.       background:green;  
  13.       text-align:left;  
  14. }  

·IE默认的最小高度为18px，不满18px的高度一律当做18px显示，而FF浏览器指定多少像素就显示多少像素。

（2）举例：

[html] view plaincopyprint?
  1. <html>  
  2.     <head>  
  3.         <title>IE浏览器小于18px的高度如何正常显示</title>  
  4.         <link rel="stylesheet" type="text/css" href="llq_chayi.css">  
  5.     </head>  
  6.   
  7.     <body>  
  8.         <div id="container">  
  9.             <div id="header">  
  10.                       
  11.             </div>   
  12.                         <div class="fenge"></div>  
  13.             <div id="main">  
  14.   
  15.             </div>  
  16.                         <div class="fenge"></div>  
  17.             <div id="footer">  
  18.   
  19.             </div>  
  20.         </div>  
  21.     </body>  
  22. </html>  

llq_chayi.css文件：
[html] view plaincopyprint?
  1. body {  
  2.      margin:0px;  
  3.      padding:0px;  
  4.      font:12px 宋体;  
  5. }  
  6.   
  7. #header {  
  8.        width:100%;  
  9.        height:80px;  
  10.        background:red;  
  11. }  
  12.   
  13. #main {  
  14.      width:100%;  
  15.      height:600px;  
  16.      background:yellow;  
  17. }  
  18.   
  19. #footer {  
  20.      width:100%;  
  21.      height:80px;  
  22.      background:blue;  
  23. }  
  24.   
  25. .fenge {  
  26.      width:100%;  
  27.      height:10px;  
  28.      clear:both;  
  29.      overflow:hidden;  
  30.   
  31. }  


·浏览器之间的默认内外边距不一样，body样式中药对margin与padding清0。

·指定了区块（即一个div）的高度，当这个区块的内容超出该设置的高度时，IE浏览器自动调整高度，而FF不会。所以，解决此问题的方法就是不用指定区块的高度。

·FF中的区块在使用了浮动属性之后显示与浮动原理一致，但是IE却不遵循浮动原理。所以，在使用浮动的区块要记得父区块也要浮动脱离文档流、清除浮动等以保证浏览器的兼容性。

·IE与FF在列表属性方面存在较大差异，主要表现在内外边距默认设置上不一样。所以，为了保证两者兼容，一般ul的样式中要将margin与padding先清0.

·h1-h6标签的内外边距不一样，所以要将margin与padding先清0。

·边框border宽度影响兼容性。在IE中，width指定的是border的宽度加上内容的宽度之和，而FF则只是内容宽度不算border宽 度。解决此问题的方法就是，在某元素的样式表中对width值进行两个设置，其中，“widt=值 ！important”这个针对FF，而此设置对IE不起作用。然而，再设置一个“width=值”针对IE就可以解决了。

分享到：
| struts2 result type
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    034-基于AT89C52的矩阵键盘扫描proteus仿真设计.rar

    51单片机

    双级式储能模型，可做充放电转以及低电压故障穿越，含有负序抑制模块，可做对称故障与不对称故障

    双级式储能模型，可做充放电转以及低电压故障穿越，含有负序抑制模块，可做对称故障与不对称故障

    郑州升达大学2024-2025第一学期计算机视觉课程期末试卷，

    郑州升达大学2024-2025第一学期计算机视觉课程期末试卷，原版。配套教材为《OpenCV计算机视觉基础教程》夏帮贵主编。

    金工实习线上考试线切割课后试题.docx

    线切割课后试题

    网络原理课程设计【校园网规划】+思科模拟器，包含pkt文件及完整实验报告，附录含有源码

    目录 摘 要 1 一、设计任务概述 3 1.1 设计目的 3 1.2 项目任务和要求 3 1.3 参考资料 3 二、项目开发环境 4 三、项目需求分析 5 四、 项目设计和实现 5 4.1 总体设计 5 4.2 功能设计 6 4.3 系统实现 7 五、系统运行和测试 12 六、设计总结 15 七、附录 16 7.1 程序清单 16 7.2 其他需要说明的内容 23。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。

    智慧物联网系统发展战略研究

    智慧物联网系统发展战略研究

    基于springboot+vue的大创管理系统2（Java毕业设计，附源码，部署教程）.zip

    该项目包含完整的前后端代码、数据库脚本和相关工具，简单部署即可运行。功能完善、界面美观、操作简单，具有很高的实际应用价值，非常适合作为Java毕业设计或Java课程设计使用。 所有项目均经过严格调试，确保可运行！下载后即可快速部署和使用。 1 适用场景： 毕业设计 期末大作业 课程设计 2 项目特点： 代码完整：详细代码注释，适合新手学习和使用 功能强大：涵盖常见的核心功能，满足大部分课程设计需求 部署简单：有基础的人，只需按照教程操作，轻松完成本地或服务器部署 高质量代码：经过严格测试，确保无错误，稳定运行 3 技术栈和工具 前端：HTML + Vue.js 后端框架：Spring Boot 开发环境：IntelliJ IDEA 数据库：MySQL（建议使用 5.7 版本，更稳定） 数据库可视化工具：Navicat 部署环境：Tomcat（推荐 7.x 或 8.x 版本），Maven

    基于springboot+vue的网上点餐系统（Java毕业设计，附源码，部署教程）.zip

    该项目包含完整的前后端代码、数据库脚本和相关工具，简单部署即可运行。功能完善、界面美观、操作简单，具有很高的实际应用价值，非常适合作为Java毕业设计或Java课程设计使用。 所有项目均经过严格调试，确保可运行！下载后即可快速部署和使用。 1 适用场景： 毕业设计 期末大作业 课程设计 2 项目特点： 代码完整：详细代码注释，适合新手学习和使用 功能强大：涵盖常见的核心功能，满足大部分课程设计需求 部署简单：有基础的人，只需按照教程操作，轻松完成本地或服务器部署 高质量代码：经过严格测试，确保无错误，稳定运行 3 技术栈和工具 前端：HTML + Vue.js 后端框架：Spring Boot 开发环境：IntelliJ IDEA 数据库：MySQL（建议使用 5.7 版本，更稳定） 数据库可视化工具：Navicat 部署环境：Tomcat（推荐 7.x 或 8.x 版本），Maven

    直流电机的电枢回路串电阻启动的计算

    电机与拖动技术三级项目报告，直流电动机是电机的主要类型之一，具有调速范围广、调速特性平滑、过载能力强等优点，在生产生活中具有广泛的应用。此次课程项目阐述了直流电动机的结构、应用、并着重对电枢回路串电阻分级启动进行深入研究，MATLAB仿真软件对直流电动机分级启动进行仿真。

    Java Spring Boot实现基于URL + IP访问频率限制(源代码)

    详细说明：https://blog.csdn.net/a342874650/article/details/144989766 在 Web 应用中，恶意用户可能会通过频繁刷新接口或进行暴力请求来攻击系统，导致服务器负载过高或服务不可用。为了应对这一问题，本文将详细介绍如何使用 Spring Boot 结合拦截器（Interceptor）和 Redis 来实现基于 URL 和 IP 的访问频率限制。具体实现包括拦截器拦截请求、Redis 存储访问记录、检测访问频率并在达到限制时禁用 IP 的完整过程。通过本文的详细实现过程和完整源代码，读者可以快速掌握如何在自己的项目中应用这一机制来增强系统的安全性和稳定性。

    JavaEE核心技术：Web框架与持久层设计方案解析（主观题考试题库）

    内容概要：本文详细介绍了JavaEE核心技术，涵盖多个重要的Web框架和持久层技术，以及其应用场景和实施方案。具体内容包括：①Struts框架的特点和功能，特别是其对MVC架构的支持，以及如何应用于薪资管理系统；②MVC架构的基本概念和如何通过JSP、JavaBean及Servlet实现成绩管理系统；③Spring IoC容器的工作原理，强调其控制反转和依赖注入功能，展示了整合Struts和JPA的具体案例，如通讯管理系统Web层设计方案；④Spring MVC结构及其XML配置方法，并提出一种针对图书管理系统的Spring MVC实现思路；⑤深入探讨Spring AOP原理，介绍如何使用XML配置进行统一事务处理的应用方案；⑥分析Hibernate核心接口及设备管理系统持久层设计方案；⑦整合Hibernate和Spring IoC实现的成绩管理系统持久层设计方案。 适合人群：具备一定Java基础的初、中级JavaEE开发者，对JavaWeb开发有兴趣的学习者。 使用场景及目标：①帮助开发者理解JavaEE关键技术和框架的实际运用，提高项目开发技能；②指导实际项目的架构设计和技术选型；③促进团队协作，提高代码复用性和维护效率。 阅读建议：建议读者根据自身经验和兴趣选择重点章节仔细研读，并结合实际情况尝试实践，逐步掌握各知识点。此外，还应该结合最新的API文档和技术论坛资料不断跟进更新。

    easy-interceptor修改请求头和响应头.zip

    easy-interceptor修改请求头和响应头.zip

    Prime-Series-Level-1.z10

    Prime_Series_Level-1.z10 别下，这个是分卷压缩，笔者用来备份的

    基于springboot+vue的教师工作量管理系统（Java毕业设计，附源码，部署教程）.zip

    该项目包含完整的前后端代码、数据库脚本和相关工具，简单部署即可运行。功能完善、界面美观、操作简单，具有很高的实际应用价值，非常适合作为Java毕业设计或Java课程设计使用。 所有项目均经过严格调试，确保可运行！下载后即可快速部署和使用。 1 适用场景： 毕业设计 期末大作业 课程设计 2 项目特点： 代码完整：详细代码注释，适合新手学习和使用 功能强大：涵盖常见的核心功能，满足大部分课程设计需求 部署简单：有基础的人，只需按照教程操作，轻松完成本地或服务器部署 高质量代码：经过严格测试，确保无错误，稳定运行 3 技术栈和工具 前端：HTML + Vue.js 后端框架：Spring Boot 开发环境：IntelliJ IDEA 数据库：MySQL（建议使用 5.7 版本，更稳定） 数据库可视化工具：Navicat 部署环境：Tomcat（推荐 7.x 或 8.x 版本），Maven

    CST0402B+跟岗实习提交资料.zip

    CST0402B+跟岗实习提交资料.zip

    基于yolov5的医学影像肺结节检测项目源码+文档说明（高分项目）

    基于yolov5的医学影像肺结节检测项目源码+文档说明（高分项目），个人大三大设计项目、经导师指导并认可通过的高分设计项目，评审分99分，代码完整确保可以运行，小白也可以亲自搞定，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为毕业设计、课程设计、期末大作业。 基于yolov5的医学影像肺结节检测项目源码+文档说明（高分项目）基于yolov5的医学影像肺结节检测项目源码+文档说明（高分项目）基于yolov5的医学影像肺结节检测项目源码+文档说明（高分项目）基于yolov5的医学影像肺结节检测项目源码+文档说明（高分项目）基于yolov5的医学影像肺结节检测项目源码+文档说明（高分项目）基于yolov5的医学影像肺结节检测项目源码+文档说明（高分项目）基于yolov5的医学影像肺结节检测项目源码+文档说明（高分项目）基于yolov5的医学影像肺结节检测项目源码+文档说明（高分项目）基于yolov5的医学影像肺结节检测项目源码+文档说明（高分项目）基于yolov5的医学影像肺结节检测项目源码+文档说明（高分项目）基于yolov5的医学影像肺结节检测项目源码+文

    循环法和对数法计算利息

    本金1W利息0.0325，几年能double?

    matlab机械臂关节空间轨迹规划,3-5-3分段多项式插值法，六自由度机械臂，该算法可运用到仿真建模机械臂上实时运动，可视化轨迹，有角度，速度，加速度仿真曲线 也可以有单独角度，速度，加速度仿真曲

    matlab机械臂关节空间轨迹规划,3-5-3分段多项式插值法，六自由度机械臂，该算法可运用到仿真建模机械臂上实时运动，可视化轨迹，有角度，速度，加速度仿真曲线。 也可以有单独角度，速度，加速度仿真曲线。 可自行更程序中机械臂与点的参数。 谢谢大家 (程序中均为弧度制参数)353混合多项式插值

    2011-2023年各省金融监管水平数据（含原始数据+计算过程+计算结果）

    2011-2023年各省金融监管水平数据（含原始数据+计算过程+计算结果） 1、时间：2011-2023年 2、来源：国家统计J、统计NJ 3、指标：金融业增加值、金融监管支出、金融监管水平 4、计算方法：金融监管水平=金融监管支出/金融业增加值

    简易手写汉字表.pdf

    本表名称为简易手写识字表，收录了21000多个汉字，每个汉字后面附上了简易手写笔画和输入编码。独体字是一个主笔画和一个字母编码，双码字是两个主笔画组合和两个字母编码，多码字是两个主笔画组合和三个字母编码。可用于识字、简易手写和大键盘汉字输入等参考。

Magicbox
Global site tag (gtag.js) - Google Analytics