html - 浏览器中缺少滚动条

标签 html css

我正在使用以下代码(HTML 和 CSS),通过使用这些代码,您无法通过鼠标滚动或在浏览器中向上或向下滚动页面(右侧的滚动条不存在)

HTML:

<div id="head">
   <div id="logo">
    <a href="#"></a>
   </div>
   <form style="display:inline;">
    <input style="margin-top:3px;" class="searchbox" type="text"/>
   </form>
 <ul>
  <li>
   <a href="#" title="Search">Searh</a> 
  <li>
  <li>
   <a href="#" title="FAQ">FAQ</a> 
  </li>
  <li>
   <a href="#" title="Links">Links</a> 
  </li>
  <li>
   <a href="#" title="Legal">Legal</a> 
  </li>
 </ul>
 </div>

CSS:

html {
 height:100%; /* fix height to 100% for IE */
 max-height:100%; /* fix height for other browsers */
 padding:0; /*remove padding */
 margin:0; /* remove margins */
 border:0; /* remove borders */
 background:#fff; /*color background - only works in IE */
 /* hide overflow:hidden from IE5/Mac */
 /* \*/
 overflow:hidden; /*get rid of scroll bars in IE */
 /* */
}
body {
 height:100%;
 max-height:100%;
 overflow:hidden;
 padding:0;
 margin:0;
 border:0;
    font: 13px/1.5 Helvetica Neue,Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;
}
#content {
 display:block;
 height:100%;
 max-height:100%;
 overflow:auto;
 padding-left:100px;
 position:relative;
 z-index:3;
 word-wrap:break-word;
 top:45px;
}
#head {
 position:absolute;
 margin:0;
 top:0;
 display:block;
 width:100%;
 height:40px;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 background:#333333;
    background: -moz-linear-gradient(center top , #333333, #111111) repeat scroll 0 0 transparent;
}
#logo a {
    background: url("twitter_logo_right.png") no-repeat scroll 20px 9px transparent;
    color: #FFFFFF;
    display: block;
    height: 40px;
    margin-right: 5px;
    outline: medium none;
    text-indent: -9999px;
    width: 140px;
 float:left;
}
.searchbox{
    -moz-border-radius: 4px 4px 4px 4px;
    -moz-box-shadow: 0 1px 0 #444444;
    background: none repeat scroll 0 0 #666666;
    border: 1px solid black;
    color: #CCCCCC;
    font: 13px Arial,sans-serif;
    padding: 6px 25px 4px 6px;
    width: 215px;
 float:left;
}

.searchbox:focus {
    background: none repeat scroll 0 0 #eeeeee;
    border: 1px solid #999999;
}
#head ul {
  margin:0;
  padding:0;
  background:transparent;
  height:100%;
  margin-left:60px;
  padding-left:60px;
  padding-top:10px;
}
#head ul li {  display:inline;}
#head ul li a { padding-left:20px;  color:#BABABA; text-decoration:none;}
#head ul li a:hover { color:#FFFFFF;  }

table tr td{height:100px; width:300px; -moz-border-radius:12px; background-color:#C6C6C6; margin:botton:30px;}
table tr td a{color: #007B9F; font-size:1.5em; text-decoration:none;}

如果您能提供帮助,请使用代码示例来解决问题:)

编辑:示例/代码编辑器 = http://jsfiddle.net/BctHr/

最佳答案

检查你的CSS:

  overflow:hidden; /* get rid of scroll bars in IE */

用于 html 和正文 删除该行,或更改为:overflow:scroll;

http://www.w3schools.com/cssref/pr_pos_overflow.asp

关于html - 浏览器中缺少滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12121230/

相关文章:

jquery - Bootstrap 日期选择器不工作。

javascript - 在 div 周围均匀分布元素?

html - 元素被推出 anchor

javascript - 选择除一个元素及其子元素/孙元素之外的所有元素

css - 无法获取 :before element to appear on ReactiveForms input

javascript - 如何根据 div 高度添加 .css 文件?

html - 在 React 中使用 <animate> 对 SVG <filter> 进行动画处理

javascript - 如何限制要在 ng-repeat 中显示的对象数量,

html - 从托管(文件管理器)目录中的 index.html 链接页面

javascript - jQuery 工具(水平 Accordion )与 jQuery UI(选项卡)相结合?