`
zhouyrt
  • 浏览: 1173388 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

webkit中设置align为center的div中的table会自动产生外边距magin，用js改变margin将不起作用

    博客分类：
  • BUG
webkitChromeIESafariFirefox 
阅读更多

该现象重现代码如下：

 

<!DOCTYPE HTML>
<HTML>
 <HEAD>
 </HEAD>
 <BODY>

  <div align="center" style="width:500px;border:1px solid gray;">
	<table id="a" style="width:100px;background:gold;"><tr><td>
		table
	</td></tr></table>
  </div>

  <p>
	<input type="button" value="modify table margin" onclick="modify()"/>
  </p>

  <script>
	var i = 0;
	function modify(){
	        i = i + 100;
		var obj = document.getElementById('a');
		obj.style.marginLeft = i+'px';
	}

  </script>

 </BODY>
</HTML>

 

 

当点击按钮modify table margin时，函数modify会修改talbe的margin，以下是各浏览器的表现

 

IE/Firefox/Opera ： 每点击一次都会移动100px

 

Safari/Chrome ： 点击后不移动

 

当利用修改margin来实现图片滚动的效果webkit浏览器中将失效。

 

 

把父元素div的align属性删掉或align=left都不会重现该bug。

 

 

 

分享到：
| webkit中使用js给html元素style设置filter ...
评论
发表评论

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

相关推荐

    设置margin和padding为0可去掉DIV与DIV的空白

    在Web开发中，经常会遇到两个或多个相邻的&lt;div&gt;元素之间出现不希望的空白或间隙问题。这些间隙可能是由于默认的CSS样式、空格、换行、图片边缘间隙或者是浏览器对旧代码的兼容性处理等引起的。在本段中，我们将详细...

    CSS 之margin知识点(必看)

    例如，若容器宽度为800px，且子元素的margin设置为10%，则该子元素的外边距计算为800px的10%，即80px。这一规则适用于所有普通元素，不包含浮动（float）和绝对定位（absolute）的元素。 2. 绝对定位元素的百分比...

    高通_AF关于镜头pos与DAC和margin的解析

    本文将对高通_AF 中镜头 pos 与 DAC 和 margin 的解析进行详细的解释。 一、Margin 与 DAC Margin 是一个关键概念，它用来扩展 DAC 的范围，以便 cover 所有的对焦景深。DACRange 是固定的，因为模组厂烧录的远近...

    详解css使既有浮动又有左右margin的多个元素两端对其

    在CSS布局设计中，有时我们需要实现一种效果，即让一组元素在页面中两端对齐，同时这些元素之间保持一定的间距，而元素的两侧不与容器边缘接触。标题中提到的"既有浮动又有左右margin的多个元素两端对其"，就是指...

    margin实现下拉刷新

    `margin`在此过程中起到关键作用，用于调整内容区域与顶部边缘的距离，模拟下拉动作。 ### 2. Margin的应用 `margin`是CSS中的一个属性，用于设置元素与周围元素的边距。在Android中，我们可以通过设置`android:...

    margin 驱动程序

    驱动程序，专门用于GPS的使用过程中的一些问题，大家只有下载了这个软件才能正常使用

    GSM网掉话、话务均衡及通话干扰的原因及解决方法

    本文主要探讨了GSM（Global System for Mobile communications）数字移动通信系统中常见的网络质量问题，包括但不限于掉话现象、通话干扰以及话务不均衡等问题，并深入分析了这些问题产生的原因及其对用户体验的影响...

    SDCCH和TCH掉话的区别是什么？.pdf

    3.小岛效应：如果服务小区A由于地形的原因产生的场强覆盖小岛C，而在小岛１C周围又为小区B的覆盖范围， 如在A的邻近小区的拓扑结构表中未添加小区B，那么当用户在C中建立呼叫后一走出小岛C，由于无处可切换将产生掉...

    2003-2022年 企业超额管理费用（原始数据+do代码+结果数据+参考文献等）.zip

    超额管理费用指的是在企业的运营过程... 公司前5位大股东持股比例的平方和、股票代码、沪深A股为1，否则为0、北京A股为1，否则为0、Listedyear、Mgtexp、lnsale、Lev、Growth、Board、Staff、Age、Magin、行业代码等等

    iOS利用CALayer实现动画加载的效果

    在iOS开发中，我们经常需要实现各种动画效果来提升用户体验，比如加载动画。在这个场景下，我们可以使用Core Animation框架中的CALayer来创建自定义的动画加载效果。下面将详细讲解如何利用CALayer实现如题所述的...

    css-flat-loader:CSS Flat 一种CSS模块化解决方案

    CSS Flat 将CSS样式格式化为单条样式，开发时只需要按照正常文件书写： .className { display: block; color: red; margin: 0 auto; } .className:hover { color: green; magin-top: 10px; } Flat化之后： .a-d...

    binja-ipython:一个将IPython内核集成到Binary Ninja中的插件

    描述： 当binja启动时，此插件将启动IPython内核，可使用例如'jupyter console --existing'将其附加到要访问诸如当前打开的二进制视图之类的变量，请使用'％load_ext binjamagic'加载扩展名可以从插件仓库的根目录...

    ImageSummary:从hdfs映像获取摘要信息，而无需解析每个inode以避免使用过多的内存

    如果使用OfflineImageViewr会占用大量的内存，很多时候甚至是不现实的，所以开发一个简单的summary程序方便查看状态十分必要。 首先看一下FSImage文件的结构，FSImage文件按照Section进行存储， 1.MAGIN_HEADER (...

    + logstash + filebeat -7.8.0.rar

    6. **使用Kibana**：在浏览器中访问Kibana的默认端口（通常为5601），配置仪表板和搜索视图，分析收集到的日志数据。 通过以上步骤，你就可以搭建一个完整的ELK日志管理系统，实现日志的高效管理和分析。在实际应用...

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