相关文章
更多最近更新
更多div中table100%宽度的浏览器兼容性问题
2019-03-25 13:48|来源: 网路
先上代码，请看：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div style="width:300px;height:100px;overflow:auto;">
<table border="1" style="table-layout:fixed;width:100%;">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
这个例子的大意是给table外面套个div，如果table的高度过高，就显示一个垂直滚动条，而里面的table是100%宽度的
据我观察，例子在IE8,FF,CHROME下能如预期般工作
但是在IE6/7下面，div会显示出一个水平滚动条，因为IE6/7下面100%宽度是包含垂直滚动条的宽度的
如果将table的width:100%样式拿掉，在IE6/7下工作就正常了，不过在其他浏览器下又不正常，这是因为对于table-layout:fixed的理解不同浏览器有差异
这个问题太烦人了，不知道有没有好的解决办法
问题补充
目前我的方法是用CSS HACK
给table的样式加上个>width:auto
这样在IE6/7下table的width就不是100%了
不过这样的方法太丑陋了，不知道有啥好点的方法没
问题补充
zbm2001 写道
IE的老问题了，目前没有太好的解决方法，内嵌套一个分区元素 Layout一下吧
<div style="width:300px;height:100px;overflow:auto;">
<div style="+zoom:1;">
<table border="1" style="table-layout:fixed;width:100%;">
……
</table>
</div>
</div>
<div style="width:300px;height:100px;overflow:auto;">
<div style="+zoom:1;">
<table border="1" style="table-layout:fixed;width:100%;">
……
</table>
</div>
</div>
这个不错，比CSS里面写HACK语法舒服点，非常感谢
相关问答
更多-
MacBook Pro怎么打开IE浏览器和兼容性视图[2022-11-20]
苹果电脑浏览器开兼容模式的方法如下：（以自带的safari浏览器为例） 1、打开safari浏览器以后，进入偏好设置。 2、在高级设置标签里，勾选显示开发的菜单。 3、现在看到safari的工具栏就多了一个开发菜单。 4、打开开发下拉菜单，找到用户代理，就可以看到兼容模式了。 -
你可以为你的ie拥有单独的css样式，所以在浏览器标识上加载css，socailly ie6有浮动div的威胁他们不同的问题，绝对和相对的定位是关键。 ie 8表现不同firefox嵌套div从父级继承css但ie8需要你指定该div的css 使用：
在浮动div之间清除下一个div的最后浮动div效果 you can have separate css style for your ie so load the css on the browser identifica ... -
回答我自己的问题...在挖掘和调试时，我在javascript文件中遇到了正确的行，对象为null，并且只包含一个代码以避免空值。 例如： if(text != null) { Enter your code.... } else { arr=0; } return arr; Answering my own question... On digging and debugging, I came across the correct line in the javascript file at wh ...
-
jquery自动完成插件是否存在浏览器兼容性问题？(Is there browser compatibility issue with jquery autocomplete plugin?)[2022-04-19]
data-placeholder不是标准的（X）HTML（就像前面有data-所有内容），根据http://api.jqueryui.com/autocomplete/，它也不是jQuery自动完成的一部分。 您应该只使用大多数当前浏览器支持的placeholder 。 对于旧版浏览器（例如IE 9），您可以使用一些JavaScript，例如在IE9或IE9 HTML5占位符中的占位符链接 - 人们如何实现这一目标？ 达到预期的效果。 data-placeholder is not standard (X) ... -
是的，它将解决浏览器兼容性问题，并且可以在Mac OS和Windows上使用相同的代码。 唯一的缺点是，当您的用户第一次连接到您的应用程序时，他将需要下载Silverlight插件。 真棒，你会说吗？ 好吧，不幸的是，有些人可能永远不会尝试在浏览器中执行类似图像处理或高级业务线应用程序的操作，因此决定插件不是那么酷，而且你可以用HTML5的神奇力量做同样的事情。 我们仍然在等待在Silverlight或Flash中使用HTML5中的相同可能性，但插件已经死了。 至少只要没有大公司想再次推动他们。 所以，我的 ...
-
浏览器的宽度不是100％(Div not 100% width of browser)[2022-03-09]
这可能是页面的边距和/或填充。 加： html, body { padding: 0; margin: 0; } .header { margin: 0; } html, body { padding: 0; margin: 0; } .header { margin: 0; position: relative; background-color: #088ed7; width: auto; height: 20px; }我相信你的问题是CSS中的语法错误： @font-face { font-family: webfont; src: url(thinnyness.ttf); src: local('Delicious'), local(Delicious'), url(thinnyness.ttf) format('truetype'); } 你错过了第二个local(Delicious')声明中的主要撇号。 这导致整个样式表中断，阻止定位工作。 I believe your probl ...在标签上添加overflow-x：hidden似乎可以修复它。 不过，我不确定为什么。 希望有人有更好的解决方案。 Adding overflow-x: hidden on the tag seems to fix it. I'm not sure why, though. Hopefully someone has a better solution.您需要在doctype之前删除评论 。 doctype 必须是HTML的第一行，否则IE将触发Quirks模式。 你的主页很好，这就是其他页面破解的原因。 You need to remove the comment before your doctype. The doctype must be the first line of your HTML, otherwise IE will trigger Quirks mode. ...您的问题可能是此规则中#box的负margin值： #box { border: 1px solid red; position: absolute; width: 250px; height: 42px; top: 50%; left: 50%; margin-top: -21px; margin-left: -125px; } 你为什么不尝试使用更传统的设置呢？ 已完成一半工作的一件事是使用margin: 0 auto; （没有position: absolute; ）水平居中你的div： #box ...