【问题标题】:Scroll bars and different browsers滚动条和不同的浏览器
【发布时间】:2014-09-26 09:32:17
【问题描述】:

在 IE 中,我的网页的垂直滚动条出现在正在滚动的表格内(这是我想要的)。在 Chrome 和 Firefox 中,它出现在外部。挺扎心的有谁知道我可以做什么,以便滚动条可以出现在所有三个浏览器的内部?这是我的 CSS;

body
{
background-color:#d0e4fe;
font-family:"Arial";
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Tahoma";
font-size:20px;
}
table.header
{
table-align:left;
border-collapse:collapse;
width:auto;
font-size:3em;
font-weight:bold;
border:1px solid grey;
table-layout: fixed;
}
table.top
{
table-align:left;
border-collapse:collapse;
width:99.2%;
//width:1800px;
//width: 1330px;
//width:auto;
table-layout: fixed;
border:1px solid grey;
}
table.body
{
border-collapse:collapse;
width:100%;
border:1px solid grey;
table-layout: fixed;
table-align:left;
}
table.footer
{
table-align:center;
border-collapse:collapse;
width:auto;
table-layout: fixed;
}
td.header
{
//border:1px solid grey;
//word-wrap: break-word;
padding:10px;
}
.scroll 
{
max-height: 425px;
//overflow: auto;
//overflow: scroll;
overflow-y: auto;
overflow-x: hidden;
}
td.body
{
border:0px solid grey;
padding:10px;
text-align:left;
border:1px solid grey;
width:8.5%;
font-size:15px;
word-wrap: break-word;
}
td.footer
{
text-align:center;
padding:10px;
word-wrap: break-word;
}
th.body
{
text-align:left;
padding:10px;
border:1px solid grey;
//width:8.4%;
font-size:15px;
word-wrap: break-word;
}

【问题讨论】:

  • 请发一个完整的代码示例。
  • 嗨,j08691 - 我已经更新了原帖。感谢您的回复。
  • 用确切的相关代码(HTML 和 CSS)发布您的问题的 JSFiddle,谢谢。

标签: css


【解决方案1】:

see here documentation 或者 see here

.scroll::-webkit-scrollbar{
width: 12px; }


.scroll::-webkit-scrollbar-track{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; }


.scroll::-webkit-scrollbar-thumb{ 
      border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }

【讨论】:

    猜你喜欢
    • 2018-08-31
    • 1970-01-01
    • 2010-09-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-11-15
    • 2015-08-11
    相关资源
    最近更新 更多