js style.display=block显示布局错乱问题的解决方法

1、当表格为多列的情况下，属性为"display:block"行的内容宽度仅与第一列宽度相同，也就是说无论你使colspan的属性值为多少，剩余列的空间都不进行解析。

2、同一行反复的在"display:none;"与"display:block;"两个状态间切换时，表格的底部会持续的产生多余的空白空间以至于造成页面布局的扭曲。

解决方法：

1、用display:table-row属性来调试，发现者FireFox下正常了，但IE是不支持改属性的，怎么办呢？用JS来做判断，然后做兼容吧。

2、另外一个很简单也很可行的方法，就是用 display:' '这个属性dispaly后面不加任何的东西，很奇怪，这样就兼容了Firefox和IE了。具体原因有待牛人分析。

以上就是小编为大家带来的js style.display=block显示布局错乱问题的解决方法的全部内容了，希望对大家有所帮助，多多支持我们~

赞 (0)

相关推荐

  • JS中style.display和style.visibility的区别实例说明

    在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示,在style.display=block和style.visibility=visible的时候,元素被显示,在style.display=none和style.visibility=hidden的时候,元素被隐藏.它们之间最大的区别是通过style.display=none隐藏的时候,元素不占据原来的位置,从文档流中脱离,后续的元素填补其位置.通过style.visibility=hidd

  • js中style.display=""无效的解决方法

    本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多的操作,但如果我们style.display=""可能导致没有效果. 看下面一段代码: 复制代码 代码如下: <style>  #name  {      display:none;  } </style> </head> <body> &l

  • 在Ruby中查找和执行方法

    当调用一个方法时,Ruby会做两件事. 1.找到这个方法.这个方法称为方法查找. 2.执行这个方法.为了做到这点,Ruby需要一个叫做self的东西. 这样的一个过程--发现一个方法再执行之--在每种面向对象语言中都会发生.不过,对于像Ruby这样非常动态的语言,深入理解这个过程显得尤为重要.你有没有好奇过一个方法究竟定义在哪里呢?如果有,那绝对应该深入理解方法查找及self. 当调用一个方法时,Ruby会在对象的类中查找那个方法.不过,在给出更复杂的例子之前,你需要了解两个新概念:接收者(re

  • js style.display=block显示布局错乱问题的解决方法

    1.当表格为多列的情况下,属性为"display:block"行的内容宽度仅与第一列宽度相同,也就是说无论你使colspan的属性值为多少,剩余列的空间都不进行解析. 2.同一行反复的在"display:none;"与"display:block;"两个状态间切换时,表格的底部会持续的产生多余的空白空间以至于造成页面布局的扭曲. 解决方法: 1.用display:table-row属性来调试,发现者FireFox下正常了,但IE是不支持改属性的,

  • JS实现数组去重,显示重复元素及个数的方法示例

    JS实现数组去重,显示重复元素及个数的方法示例

    本文实例讲述了JS实现数组去重,显示重复元素及个数的方法.分享给大家供大家参考,具体如下: <script> var arr = ['土豆','土豆','茄子','土豆','茄子','土豆','紫红色']; function qc(arr){ var resultObj = {}; var result = []; var result2 = []; for(var i=0; i<arr.length; i++){ if(result.indexOf(arr[i]) == -1){ re

  • js无法获取到html标签的属性的解决方法

    没有写标签的属性,javascript是无法获取到的,谨记,只有给标签写了属性才有,例如比如你要获取某个div的id,但是你没有明确加上是没有这个属性的 之前我就纳闷了,visibility为什么可以实现div的隐藏和显示而display不可以,我明明记得以前可以的,原来是我在style的属性里面给它写的是visibility,没有写display,而以前写的是display <%@ page language="java" import="java.util.*&qu

  • Android7.0上某些PopuWindow出现显示位置不正确问题的解决方法

    本文实例讲述了Android7.0上某些PopuWindow出现显示位置不正确问题的解决方法.分享给大家供大家参考,具体如下: 情景描述: 在andorid7.0及以上系统,点击某个view,本来期待有一个Popuwindow在该view下面弹出(调用PopuWindow.showAsDropDown(view)方法)但结果PopuWindow却弹出在view上方,顶在系统状态栏下面. 原因分析: 在android7.0上,如果不主动约束PopuWindow的大小,比如,设置布局大小为 MATC

  • JS提示：Uncaught SyntaxError:Unexpected token ) 错误的解决方法

    本文实例讲述了JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法.分享给大家供大家参考,具体如下: Uncaught SyntaxError: Unexpected token ) 以下代码引发了此异常: <div class="Hd_live_Sharediv left"> <a href="javascript:void()" onclick="loadLivePlayer('ud

  • vue contextmenujs鼠标右键菜单高度不够显示不全的问题及解决方法

    vue contextmenujs鼠标右键菜单高度不够显示不全的问题及解决方法

    之前是采用npm或者yarn直接装包vue-contextmenujs的形式: npm install vue-contextmenujs -S || yarn add vue-contextmenujs 当右键点击记录时,完整展示应该是如下图所示: 结果,当点击靠前的记录时,顶部一部分记录被浏览器给遮挡了,如下图所示: 由于是使用的第三方开源组件,所以我直接将组件源码下载下来,然后修改组件源码,通过直接在源码中引入组件的形式调用.组件github仓库地址:https://github.com/

  • JS模态窗口返回值兼容问题的完美解决方法

    因系统要兼容原IE已使用的关闭方法,经调试测得,需对window.dialogArguments进行再较验,不然易出问题. function OKEnd(vals) { if (vals == null) vals = "TRUE"; if (typeof (window.opener) == "undefined") { if (typeof (window.dialogArguments) != "undefined") { if (wind

  • Radio 单选JS动态添加的选项onchange事件无效的解决方法

    //记一个问题(已经解决2016.5.5) //在公司项目中遇见一个添加单选项的需求,采用ajax一步请求.为节约资源添加后不刷新网页,js动态改变页面 //当选择到动态添加的单选项,执行绑定事件 radio 单选JS动态添加的选项,onchange事件无效.使用delegate()函数可以解决该问题!!! delegate(): delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数. 使用 delegate() 方法的事件处

  • Android 文件夹显示红色叹号的解决方法(必看)

    Android 文件夹显示红色叹号的解决方法(必看)

    有感叹号,说明有的文件损坏或丢失了 解决方法: 右击工程,Build Path..->Configure Build Path...->Java Build Path 可以看到引用的jar包,看看是不是带x了 不用的话就移除,要用的引用回正确路径就可以了 以上这篇Android 文件夹显示红色叹号的解决方法(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • SpringMVC架构的项目 js,css等静态文件导入有问题的解决方法

    SpringMVC架构的项目 js,css等静态文件导入有问题的解决方法

    发生原因 <servlet> <servlet-name>springmvc-mybaits</servlet-name> <servlet-class> org.springframework.web.servlet.DispatcherServlet </servlet-class> <init-param> <param-name>contextConfigLocation</param-name> &l

随机推荐