Internet Explorer为垂直滚动条的宽度创建水平滚动条 [英] Internet explorer creates horizontal scrollbar for vertical scrollbar's width

问题描述

包含表格的div具有以下CSS样式：

  #formulaAlts {
 float：right; 
 height：200px; $ b $b overflow：auto; 
} 
  

这使得当表大于200px时，为表和页面上的其他元素保留。很好！

现在为我们的朋友IE ...

在IE中，元素生成垂直滚动条而不增加包含的元素。要解决这个，创建一个水平滚动条。

这很烂。

-

EDIT -

我发现行

  overflow-x：hidden; 
  

强制IE忽略水平滚动条。

解决方案

小心。

  overflow-x 
  

我倾向于使用一个包含右边填充的div：

CSS：

  div.scroll {
 overflow：auto; 
 padding-right：6px; 
 / *我发现6px只是我的目的，但尝试别人* / 
} 
  

编辑：你需要在这个地方添加一个height属性来工作！我通常有一个默认设置在div.scroll声明，然后tweak的特定情况下（大多数）。
HTML：

 < div class =scroll> 
< table> 
<！ - 你的表的东西在这里 - > 
< / table> 
< / div> 
  

A div, containing a table has the following CSS styling:

#formulaAlts{
    float: right;   
    height: 200px;
    overflow: auto;
}

This makes it so that when the table is >200px, a scrollbar appears only for the table and the other elements on the page stay put. Great!

Now for our friend IE...
In IE, the element spawns the vertical scrollbar without growing the containing element. To "solve" this, a horizontal scrollbar is created.
That sucks. And I don't want it to suck...

Any ideas?

--EDIT--
I found out that the line

overflow-x: hidden;

forces IE to ignore the horizontal scrollbar. This is better.. but not quite there because now part of my table is invisble.

解决方案

Careful.

overflow-x

isn't the most widely supported attribute out there.

I tend to go with a containing div with some right padding:

CSS:

div.scroll {
  overflow:auto;
  padding-right:6px;
  /* I've found 6px to be just right my purposes, but try others*/
}

EDIT: You'll need to add a height attribute somewhere for this to work! I usually have a default set in the div.scroll declaration then tweak that for specific cases (most). HTML:

<div class="scroll" >
  <table>
  <!-- your table stuff in here -->
  </table>
</div>

这篇关于Internet Explorer为垂直滚动条的宽度创建水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！