ie 和谷歌浏览器在display的边框显示不一样的解决办法

eg1:

<style>

.class2{displau:block; background-color:#e4f39e;width:150px;height:150px; border:10px solid green;}

</style>

<div class="class2">测试</div>

result:

      

左侧是google上运行的结果      右侧是在ie上运行的结果

在eg1上,用了display:block这个属性,在google浏览器中,display:block和border这两个属性的width值和height值会相加,即:外框是10px  乘以2(左右边框各10像素)+内框150px,总大小是10px  乘以2+150px=170px,就是宽和高都是170px;

在ie浏览器中,display:block和border这两个属性的width值和height值会重叠在一起,总大小就会是原来的大小。即宽和高都是150px;

解决的方法:

第一种:把display:block改为display:table-cell

步骤一:

<style>

.class2{displau:table-cell; background-color:#e4f39e;width:150px;height:150px; border:10px solid green;}

</style>

<div class="class2">测试2</div>

运行的结果:

      

google上                                ie 上

在google和ie上,该模块的高度一致了,都是150px,只是宽度不同,谷歌的宽度是170px;ie的宽度是150px;所以接下来

步骤二,在最外层套一个类然后定义宽度。

eg3:

<style>

.calss1{width:150px;}

.class2{displau:table-cell; background-color:#e4f39e;width:150px;height:150px; border:10px solid green;}

</style>

<div class="class1"><div class="class2">测试3</div></div>

       

google浏览器上                ie浏览器上

现在在这两个浏览器上显示的是一样的呢。方法是在声明一个类。定义你想要的宽度,在这里既是150px,然后套在最外层,定义宽度就好了,高度没哟必要定义了。

ie 和谷歌浏览器在display的边框显示不一样的解决办法

时间: 2024-11-05 21:58:50

ie 和谷歌浏览器在display的边框显示不一样的解决办法的相关文章

使用vMware workstation 10安装操作系统显示内部错误的解决办法

在打开vMware workstation 10以后,准备安装Solaris 10操作系统,但是当点击"创建新的虚拟机"的时候,弹出一个对话框,显示"内部错误". 百度了一下,说去程序和功能里面找到vMware workstation 10的安装程序,里面有个修复,修复它既可.可是我试了几遍,都未能成功. 后来才发现,服务项里的vMware有启动状态,有停止状态,把停止状态启动它就OK了. 重新启动vMware workstation 10,正常运行. 使用vMwa

Eclipse导入MyEclipse工程(web项目显示为java项目解决办法)

在直接Import MyEclipse的项目文件导入到Eclipse之后,需要在项目所放的workspace内修改引入项目目录下的.project文件,修改如下: 1.在eclipse中新建一个WEB项目将根目录下下的.project文件覆盖到导出的项目同样目录下, 2.打开导入项目的.project文件,修改下<name>test</name>中间的值即可 之后,刷新项目工程文件.继而,右键项目-->Properties-->选择Project Facets,勾选Dy

checkbox属性checked=&quot;checked&quot;已有,但却不显示打勾的解决办法

checkbox属性checked="checked"已有,但却不显示打勾的解决办法 #### 查阅其他网站  发现主要是因为Jquery的版本问题 1.attr(): 获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性. 在jQuery 1.6中,当属性没有被设置时候,.attr()方法将返回undefined.若要检索和更改DOM属性,比如元素的checked, selected, 或 disabled状态,请使用.prop()方法. 2.remov

Easyui Datagrid rownumbers行号四位、五位显示不完全的解决办法

Easyui Datagrid rownumbers行号四位.五位显示不完全的解决办法(引) 方法一: 相信很多人在使用easyui的时候都遇到过这个问题,当我们设置成显示Rownumber的时候,你会发现,如果Rownumber越来越大,达到三位数或者四位数的时候,Rownumber就显示不全了.这个问题纠结了不知道多少人,在群里和论坛里面都的都被问到无数次了. 以前也一直没有太认真考虑过要解决这个问题,恰好最近有点时间,就研究了一下,其实要解决也很简单,扩展一个方法就行了. 首先,从data

用BaseAdapter适配ListView只显示了一行的解决办法

今天我用BaseAdapter去适配一个ListView,结果只显示了一行,原来应该是有那个ArrayList<...>的size行的数据的.很奇怪. 我是这样写的ListView所在Layout.xml: 1 <?xml version="1.0" encoding="utf-8"?> 2 <ScrollView 3 android:layout_width="match_parent" 4 android:lay

iOS开发- iOS7显示偏差(UITableView下移)解决办法

之前碰到过一个问题. 就是利用storyboard拖动出来的控件, 在iOS7上跑老是莫名的下移. 比如这样(红色区域为多余的) 解决办法: iOS7在Conttoller中新增了这个属性: automaticallyAdjustsScrollViewInsets,当设置为YES时(默认YES),如果视图里面存在唯一一个UIScrollView或其子类View,那么它会自动设置相应的内边距,这样可以让scroll占据整个视图,又不会让导航栏遮盖. 我们设置automaticallyAdjusts

Excel在任务栏中只显示一个窗口的解决办法

Excel在任务栏中只显示一个窗口的解决办法 以前朋友遇到过这个问题,这次自己又遇到了,习惯了以前的那种在任务栏中显示全部窗口,方便用Alt+Tab键进行切换. 如果同时打开许多Excel工作簿,在桌面任务栏中通常会显示多个工作簿窗口按钮.如果任务栏只中显示了一个Excel窗口按钮,所有的工作簿窗口只出现在Excel程序窗口内部,可能是相关的设置被改动了,可以通过下面方法改回设置: 在Excel 2003中单击菜单“工具→选项”,选择“视图”选项卡,选择“任务栏中的窗口”. 在Excel 200

网络连接显示为空白的解决办法

电脑网络连接显示为空白的解决办法: 问题:网络连接里面没有本地连接.1394连接等图标,里面都是空白,但是设备管理器里面网卡正常,网卡灯也亮,询问如何解决.如图: 解决方案:在我的电脑上点击右键,选择管理,点击服务.从服务里面找到NetworkConnections服务.该服务的描述为:管理"网络和拨号连接"文件夹中对象,在其中可以查看局域网和远程连接.因此如果此服务被禁用,控制面板中"网络连接"里面即为空白,但是设备管理器中的网络设备正常.如下图 总结:在Wind

使用IDEA工具整合mybatis时使用@Resource和@Autowired自动注解bean时会显示红色问题的解决办法

使用IDEA工具整合mybatis时使用@Resource和@Autowired自动注解bean时会显示红色问题的解决办法 idea中springboot整合mybatis时,通过@Autowired注入的对象一直有下划线提示,但是项目能运行,虽然不影响运行,但是强迫症的程序员肯定看不下去. 如何去除呢?解决:改变@Autowired的检查级别即可.快捷键:Ctrl+Alt+s,进入idea设置界面,输入inspections检索,如下: 原文地址:https://www.cnblogs.com