2014-01-08 3 views
0

В 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; 
} 
+0

Пожалуйста, пост полный пример кода. – j08691

+0

Привет, j08691 - Я обновил исходное сообщение. Спасибо за ответ. – Kimomaru

+0

Опубликовать JSFiddle вашей проблемы с точным кодом revelant (как HTML, так и 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); } 
+0

введите html-код – AvrilAlejandro

Смежные вопросы