IE9 Float with Overflow:Hidden 和 Table Width 100% 无法正确显示 [英] IE9 Float with Overflow:Hidden and Table Width 100% Not Displaying Properly

查看：20
本文介绍了IE9 Float with Overflow:Hidden 和 Table Width 100% 无法正确显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图在页面的右侧浮动一个容器.在它的左边是很多表格，我需要 100% 宽度.我希望它们一直延伸到右侧的浮动元素.当右侧的元素结束时，我希望表格延伸到页面的末尾.

这适用于除 IE 之外的所有浏览器.在 IE 中，所有表格都显示在右侧浮动元素的下方.我知道有一种解决方法可以解决 IE 中隐藏的溢出问题，但我无法让它发挥作用.

下面的代码.

<style type="text/css">.container{margin:0 auto;最小宽度:1000px；最大宽度:1200 像素；}.sidebar{float:right;width:300px;margin-left:5px;}.tholder{溢出:隐藏；}</风格><div class="容器"><div class="sidebar"><img src="dsfd.jpg" height="600" width="295">

<div class="tholder"><Table width="100%" border="1"><tr><td>Text</td></tr></table>

<div class="tholder"><Table width="100%" border="1"><tr><td>测试在此进行</td></tr></table>

<div class="tholder"><表格宽度=100%"边框=1"><tr><td>text</td></tr></table>

解决方案

当某些内容在其他浏览器中有效但在 IE9 中无效时，可能是您的标题不正确.检查这个:

<头><meta http-equiv="X-UA-Compatible" content="IE=edge"/>

I am trying to float a container on the right hand side of the page. To the left of it are a lot of tables that I need to be 100% width. I want them to go extend all the way to the floating element on the right. When that element on the right ends I want the tables to extend to the end of the page.

This works great in every browser except IE. In IE all the tables display below the floated element on the right. I know there's a workaround for overflow hidden in IE but I can't get it to work.

Code below.

<head>
<style type="text/css">
.container{margin:0 auto; min-width:1000px; max-width:1200px;}
.sidebar{float:right;width:300px;margin-left:5px;}
.tholder{overflow:hidden;}
</style>
</head>
<div class="container">
<div class="sidebar">
<img src="dsfd.jpg" heigh="600" width="295">
</div>
<div class="tholder">
<Table width="100%" border="1"><tr><td>Text</td></tr></table>
</div>
<div class="tholder">
<Table width="100%" border="1"><tr><td>Test goes here</td></tr></table>
</div>
<div class="tholder">
<Table width="100%" border="1"><tr><td>text</td></tr></table>
</div>
</div>

解决方案

When something works in other browsers but not in IE9, chance is that your header isn't correct. Check with this one :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

这篇关于IE9 Float with Overflow:Hidden 和 Table Width 100% 无法正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆