不同标准下去滚动条的办法

2019独角兽企业重金招聘Python工程师标准>>>

在以前的HTML标准下，要隐藏横向滚动条，只需要在CSS里加上
Body
{
   overflow-x:hidden;
}
但是在现在的标准下"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"下面，上面的代码不产生任何效果，因为现在不是以Body作为容器，而是html标签，所以
加入：
HTML
{
   overflow-x:hidden;
}
但是这样做了以后，在IE7下，鼠标滚轮上下滚动不起作用了，IE6下却是正常的。多加上一行代码就解决问题了
HTML
{ 
  overflow-x:hidden;
  overflow-y:auto;
}

 

这段可以放入一个全局的css样式中，这样所有弹出窗口(包括模态窗口)，所有页面都不会出现横向滚动条。

 

以前我一直为这个问题困扰，如在IE下把横向滚动条去掉了，但Firefox下又有了，反之亦然。
做事应该近乎完美，所以我请教了Google，自己总结出了一个方法可以两者兼得。
MORE...
如有这样的框架代码：

  CODE: 
<frameset rows="*,20" cols="*" framespacing="0" frameborder="no" border="0">
<frame src="./weblog.php" name="mainFrame" id="mainFrame" scrolling="auto" noresize="noresize" />
<frame width="100%" src="./mp3player/index.html" name="bottomFrame" scrolling="no" noresize="noresize" id="bottomFrame" />
</frameset> 



如果把mainframe框架的scrolling设成auto（默认），在IE中就会有横向滚动条；如把scrolling设为yes，IE中横向滚动条就没有了，但Firefox中就会出现。

为了能两全，我们在使用上面框架代码的同时，需要再在weblog.php页关联的CSS中定义如下样式：

  CODE: 
body { 
overflow: scroll;
overflow-x: hidden;
overflow-x: auto !important;
} 



注：body{...}也可以用html{...}代替
这样，“丑陋”的横向滚动条在IE和Firefox下就消失了。
注：此文是针对HTML有声明DTD的情况，如果没声明DTD，直接在mainFrame里把scrolling设为auto就OK，CSS样式就不用改了。

 

转载于:https://my.oschina.net/u/780876/blog/518213