2013-12-18 51 views
0

好的,所以我有一張表,應該可以在頁面頂部的持久div下滾動。表中的內容被設置爲溢出,所以可以在該表中自己滾動。問題在於,滾動表格時出現的滾動條出現在表格應該滾動的下方的div頂部。表中的滾動條出現在Chrome中其他元素的頂部

Here's a picture

我在Chrome。奇怪的是,同一個(ish)版本的Chrome上的朋友根本沒有看到這個問題。這個問題在Safari中不存在。對於DIV

全部計算CSS:

-webkit-animation-delay: 0s; 
-webkit-animation-direction: normal; 
-webkit-animation-duration: 0s; 
-webkit-animation-fill-mode: none; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-name: none; 
-webkit-animation-play-state: running; 
-webkit-animation-timing-function: ease; 
-webkit-app-region: no-drag; 
-webkit-appearance: none; 
-webkit-backface-visibility: visible; 
-webkit-background-clip: border-box; 
-webkit-background-composite: source-over; 
-webkit-background-origin: padding-box; 
-webkit-background-size: auto; 
-webkit-border-fit: border; 
-webkit-border-horizontal-spacing: 0px; 
-webkit-border-image: none; 
-webkit-border-vertical-spacing: 0px; 
-webkit-box-align: stretch; 
-webkit-box-decoration-break: slice; 
-webkit-box-direction: normal; 
-webkit-box-flex: 0; 
-webkit-box-flex-group: 1; 
-webkit-box-lines: single; 
-webkit-box-ordinal-group: 1; 
-webkit-box-orient: horizontal; 
-webkit-box-pack: start; 
-webkit-box-reflect: none; 
-webkit-box-shadow: none; 
-webkit-clip-path: none; 
-webkit-column-axis: auto; 
-webkit-column-break-after: auto; 
-webkit-column-break-before: auto; 
-webkit-column-break-inside: auto; 
-webkit-column-count: auto; 
-webkit-column-gap: normal; 
-webkit-column-progression: normal; 
-webkit-column-rule-color: rgb(51, 51, 51); 
-webkit-column-rule-style: none; 
-webkit-column-rule-width: 0px; 
-webkit-column-span: none; 
-webkit-column-width: auto; 
-webkit-filter: none; 
-webkit-font-kerning: auto; 
-webkit-font-smoothing: auto; 
-webkit-font-variant-ligatures: normal; 
-webkit-highlight: none; 
-webkit-hyphenate-character: auto; 
-webkit-line-align: none; 
-webkit-line-box-contain: block inline replaced; 
-webkit-line-break: auto; 
-webkit-line-clamp: none; 
-webkit-line-grid: none; 
-webkit-line-snap: none; 
-webkit-locale: auto; 
-webkit-margin-after-collapse: collapse; 
-webkit-margin-before-collapse: collapse; 
-webkit-mask-box-image: none; 
-webkit-mask-box-image-outset: 0px; 
-webkit-mask-box-image-repeat: stretch; 
-webkit-mask-box-image-slice: 0 fill; 
-webkit-mask-box-image-source: none; 
-webkit-mask-box-image-width: auto; 
-webkit-mask-clip: border-box; 
-webkit-mask-composite: source-over; 
-webkit-mask-image: none; 
-webkit-mask-origin: border-box; 
-webkit-mask-position: 0% 0%; 
-webkit-mask-repeat: repeat; 
-webkit-mask-size: auto; 
-webkit-perspective: none; 
-webkit-perspective-origin: 517.5px 22.5px; 
-webkit-print-color-adjust: economy; 
-webkit-rtl-ordering: logical; 
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.4); 
-webkit-text-combine: none; 
-webkit-text-decorations-in-effect: none; 
-webkit-text-emphasis-color: rgb(51, 51, 51); 
-webkit-text-emphasis-position: over; 
-webkit-text-emphasis-style: none; 
-webkit-text-fill-color: rgb(51, 51, 51); 
-webkit-text-orientation: vertical-right; 
-webkit-text-security: none; 
-webkit-text-stroke-color: rgb(51, 51, 51); 
-webkit-text-stroke-width: 0px; 
-webkit-transform: none; 
-webkit-transform-origin: 517.5px 22.5px; 
-webkit-transform-style: flat; 
-webkit-transition-delay: 0s; 
-webkit-transition-duration: 0s; 
-webkit-transition-property: all; 
-webkit-transition-timing-function: ease; 
-webkit-user-drag: auto; 
-webkit-user-modify: read-only; 
-webkit-user-select: text; 
-webkit-writing-mode: horizontal-tb; 
align-content: stretch; 
align-items: stretch; 
align-self: stretch; 
alignment-baseline: auto; 
background-attachment: scroll; 
background-clip: border-box; 
background-color: rgba(0, 0, 0, 0); 
background-image: none; 
background-origin: padding-box; 
background-position: 0% 0%; 
background-repeat: repeat; 
background-size: auto; 
baseline-shift: baseline; 
border-bottom-color: rgb(51, 51, 51); 
border-bottom-left-radius: 0px; 
border-bottom-right-radius: 0px; 
border-bottom-style: none; 
border-bottom-width: 0px; 
border-collapse: separate; 
border-image-outset: 0px; 
border-image-repeat: stretch; 
border-image-slice: 100%; 
border-image-source: none; 
border-image-width: 1; 
border-left-color: rgb(51, 51, 51); 
border-left-style: none; 
border-left-width: 0px; 
border-right-color: rgb(51, 51, 51); 
border-right-style: none; 
border-right-width: 0px; 
border-top-color: rgb(51, 51, 51); 
border-top-left-radius: 0px; 
border-top-right-radius: 0px; 
border-top-style: none; 
border-top-width: 0px; 
bottom: auto; 
box-shadow: none; 
box-sizing: content-box; 
buffered-rendering: auto; 
caption-side: top; 
clear: none; 
clip: auto; 
clip-path: none; 
clip-rule: nonzero; 
color: rgb(51, 51, 51); 
color-interpolation: srgb; 
color-interpolation-filters: linearrgb; 
color-rendering: auto; 
cursor: auto; 
direction: ltr; 
display: block; 
dominant-baseline: auto; 
empty-cells: show; 
fill: #000000; 
fill-opacity: 1; 
fill-rule: nonzero; 
filter: none; 
flex-basis: auto; 
flex-direction: row; 
flex-grow: 0; 
flex-shrink: 1; 
flex-wrap: nowrap; 
float: none; 
flood-color: rgb(0, 0, 0); 
flood-opacity: 1; 
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
font-size: 12px; 
font-style: normal; 
font-variant: normal; 
font-weight: normal; 
glyph-orientation-horizontal: 0deg; 
glyph-orientation-vertical: auto; 
height: 45px; 
image-rendering: auto; 
justify-content: flex-start; 
kerning: 0; 
left: auto; 
letter-spacing: normal; 
lighting-color: rgb(255, 255, 255); 
line-height: 20px; 
list-style-image: none; 
list-style-position: outside; 
list-style-type: disc; 
margin-bottom: 0px; 
margin-left: 0px; 
margin-right: 0px; 
margin-top: 0px; 
marker-end: none; 
marker-mid: none; 
marker-start: none; 
mask: none; 
mask-type: luminance; 
max-height: none; 
max-width: none; 
min-height: 0px; 
min-width: 0px; 
opacity: 1; 
order: 0; 
orphans: auto; 
outline-color: rgb(51, 51, 51); 
outline-offset: 0px; 
outline-style: none; 
outline-width: 0px; 
overflow-wrap: normal; 
overflow-x: visible; 
overflow-y: visible; 
padding-bottom: 0px; 
padding-left: 0px; 
padding-right: 0px; 
padding-top: 0px; 
page-break-after: auto; 
page-break-before: auto; 
page-break-inside: auto; 
pointer-events: auto; 
position: static; 
resize: none; 
right: auto; 
shape-rendering: auto; 
speak: normal; 
stop-color: rgb(0, 0, 0); 
stop-opacity: 1; 
stroke: none; 
stroke-dasharray: none; 
stroke-dashoffset: 0; 
stroke-linecap: butt; 
stroke-linejoin: miter; 
stroke-miterlimit: 4; 
stroke-opacity: 1; 
stroke-width: 1; 
tab-size: 8; 
table-layout: auto; 
text-align: start; 
text-anchor: start; 
text-decoration: none solid rgb(51, 51, 51); 
text-indent: 0px; 
text-overflow: clip; 
text-rendering: auto; 
text-shadow: none; 
text-transform: none; 
top: auto; 
transition-delay: 0s; 
transition-duration: 0s; 
transition-property: all; 
transition-timing-function: ease; 
unicode-bidi: normal; 
vector-effect: none; 
vertical-align: baseline; 
visibility: visible; 
white-space: normal; 
widows: auto; 
width: 1035px; 
word-break: normal; 
word-spacing: 0px; 
word-wrap: normal; 
writing-mode: lr-tb; 
z-index: auto; 
zoom: 1; 

全部爲表計算的CSS:

-webkit-animation-delay: 0s; 
-webkit-animation-direction: normal; 
-webkit-animation-duration: 0s; 
-webkit-animation-fill-mode: none; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-name: none; 
-webkit-animation-play-state: running; 
-webkit-animation-timing-function: ease; 
-webkit-app-region: no-drag; 
-webkit-appearance: none; 
-webkit-backface-visibility: visible; 
-webkit-background-clip: border-box; 
-webkit-background-composite: source-over; 
-webkit-background-origin: padding-box; 
-webkit-background-size: auto; 
-webkit-border-fit: border; 
-webkit-border-horizontal-spacing: 0px; 
-webkit-border-image: none; 
-webkit-border-vertical-spacing: 0px; 
-webkit-box-align: stretch; 
-webkit-box-decoration-break: slice; 
-webkit-box-direction: normal; 
-webkit-box-flex: 0; 
-webkit-box-flex-group: 1; 
-webkit-box-lines: single; 
-webkit-box-ordinal-group: 1; 
-webkit-box-orient: horizontal; 
-webkit-box-pack: start; 
-webkit-box-reflect: none; 
-webkit-box-shadow: none; 
-webkit-clip-path: none; 
-webkit-column-axis: auto; 
-webkit-column-break-after: auto; 
-webkit-column-break-before: auto; 
-webkit-column-break-inside: auto; 
-webkit-column-count: auto; 
-webkit-column-gap: normal; 
-webkit-column-progression: normal; 
-webkit-column-rule-color: rgb(51, 51, 51); 
-webkit-column-rule-style: none; 
-webkit-column-rule-width: 0px; 
-webkit-column-span: none; 
-webkit-column-width: auto; 
-webkit-filter: none; 
-webkit-font-kerning: auto; 
-webkit-font-smoothing: auto; 
-webkit-font-variant-ligatures: normal; 
-webkit-highlight: none; 
-webkit-hyphenate-character: auto; 
-webkit-line-align: none; 
-webkit-line-box-contain: block inline replaced; 
-webkit-line-break: auto; 
-webkit-line-clamp: none; 
-webkit-line-grid: none; 
-webkit-line-snap: none; 
-webkit-locale: auto; 
-webkit-margin-after-collapse: collapse; 
-webkit-margin-before-collapse: collapse; 
-webkit-mask-box-image: none; 
-webkit-mask-box-image-outset: 0px; 
-webkit-mask-box-image-repeat: stretch; 
-webkit-mask-box-image-slice: 0 fill; 
-webkit-mask-box-image-source: none; 
-webkit-mask-box-image-width: auto; 
-webkit-mask-clip: border-box; 
-webkit-mask-composite: source-over; 
-webkit-mask-image: none; 
-webkit-mask-origin: border-box; 
-webkit-mask-position: 0% 0%; 
-webkit-mask-repeat: repeat; 
-webkit-mask-size: auto; 
-webkit-perspective: none; 
-webkit-perspective-origin: 411px 158px; 
-webkit-print-color-adjust: economy; 
-webkit-rtl-ordering: logical; 
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.4); 
-webkit-text-combine: none; 
-webkit-text-decorations-in-effect: none; 
-webkit-text-emphasis-color: rgb(51, 51, 51); 
-webkit-text-emphasis-position: over; 
-webkit-text-emphasis-style: none; 
-webkit-text-fill-color: rgb(51, 51, 51); 
-webkit-text-orientation: vertical-right; 
-webkit-text-security: none; 
-webkit-text-stroke-color: rgb(51, 51, 51); 
-webkit-text-stroke-width: 0px; 
-webkit-transform: none; 
-webkit-transform-origin: 411px 158px; 
-webkit-transform-style: flat; 
-webkit-transition-delay: 0s; 
-webkit-transition-duration: 0s; 
-webkit-transition-property: all; 
-webkit-transition-timing-function: ease; 
-webkit-user-drag: auto; 
-webkit-user-modify: read-only; 
-webkit-user-select: text; 
-webkit-writing-mode: horizontal-tb; 
align-content: stretch; 
align-items: stretch; 
align-self: stretch; 
alignment-baseline: auto; 
background-attachment: scroll; 
background-clip: border-box; 
background-color: rgb(245, 245, 245); 
background-image: none; 
background-origin: padding-box; 
background-position: 0% 0%; 
background-repeat: repeat; 
background-size: auto; 
baseline-shift: baseline; 
border-bottom-color: rgb(206, 206, 206); 
border-bottom-left-radius: 0px; 
border-bottom-right-radius: 0px; 
border-bottom-style: solid; 
border-bottom-width: 1px; 
border-collapse: collapse; 
border-image-outset: 0px; 
border-image-repeat: stretch; 
border-image-slice: 100%; 
border-image-source: none; 
border-image-width: 1; 
border-left-color: rgb(206, 206, 206); 
border-left-style: solid; 
border-left-width: 1px; 
border-right-color: rgb(206, 206, 206); 
border-right-style: solid; 
border-right-width: 1px; 
border-top-color: rgb(206, 206, 206); 
border-top-left-radius: 0px; 
border-top-right-radius: 0px; 
border-top-style: solid; 
border-top-width: 1px; 
bottom: auto; 
box-shadow: none; 
box-sizing: content-box; 
buffered-rendering: auto; 
caption-side: top; 
clear: none; 
clip: auto; 
clip-path: none; 
clip-rule: nonzero; 
color: rgb(51, 51, 51); 
color-interpolation: srgb; 
color-interpolation-filters: linearrgb; 
color-rendering: auto; 
cursor: auto; 
direction: ltr; 
display: block; 
dominant-baseline: auto; 
empty-cells: show; 
fill: #000000; 
fill-opacity: 1; 
fill-rule: nonzero; 
filter: none; 
flex-basis: auto; 
flex-direction: row; 
flex-grow: 0; 
flex-shrink: 1; 
flex-wrap: nowrap; 
float: none; 
flood-color: rgb(0, 0, 0); 
flood-opacity: 1; 
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
font-size: 12px; 
font-style: normal; 
font-variant: normal; 
font-weight: normal; 
glyph-orientation-horizontal: 0deg; 
glyph-orientation-vertical: auto; 
height: 300px; 
image-rendering: auto; 
justify-content: flex-start; 
kerning: 0; 
left: auto; 
letter-spacing: normal; 
lighting-color: rgb(255, 255, 255); 
line-height: 16px; 
list-style-image: none; 
list-style-position: outside; 
list-style-type: disc; 
margin-bottom: 30px; 
margin-left: 0px; 
margin-right: 0px; 
margin-top: 0px; 
marker-end: none; 
marker-mid: none; 
marker-start: none; 
mask: none; 
mask-type: luminance; 
max-height: 300px; 
max-width: none; 
min-height: 0px; 
min-width: 0px; 
opacity: 1; 
order: 0; 
orphans: auto; 
outline-color: rgb(51, 51, 51); 
outline-offset: 0px; 
outline-style: none; 
outline-width: 0px; 
overflow-wrap: normal; 
overflow-x: auto; 
overflow-y: auto; 
padding-bottom: 0px; 
padding-left: 0px; 
padding-right: 0px; 
padding-top: 14px; 
page-break-after: auto; 
page-break-before: auto; 
page-break-inside: auto; 
pointer-events: auto; 
position: static; 
resize: none; 
right: auto; 
shape-rendering: auto; 
speak: normal; 
stop-color: rgb(0, 0, 0); 
stop-opacity: 1; 
stroke: none; 
stroke-dasharray: none; 
stroke-dashoffset: 0; 
stroke-linecap: butt; 
stroke-linejoin: miter; 
stroke-miterlimit: 4; 
stroke-opacity: 1; 
stroke-width: 1; 
tab-size: 8; 
table-layout: auto; 
text-align: left; 
text-anchor: start; 
text-decoration: none solid rgb(51, 51, 51); 
text-indent: 0px; 
text-overflow: clip; 
text-rendering: auto; 
text-shadow: none; 
text-transform: none; 
top: auto; 
transition-delay: 0s; 
transition-duration: 0s; 
transition-property: all; 
transition-timing-function: ease; 
unicode-bidi: normal; 
vector-effect: none; 
vertical-align: baseline; 
visibility: visible; 
white-space: normal; 
widows: auto; 
width: 820px; 
word-break: normal; 
word-spacing: 0px; 
word-wrap: normal; 
writing-mode: lr-tb; 
z-index: auto; 
zoom: 1; 
+0

您是否試過Z-index? –

+0

是的,試圖將div的z-index設置爲荒謬的高和沒有運氣。 – ACPrice

+0

荒謬的高可能會太高,你試圖設置它有多高?我記得有一個Z指數限制。 – DrCord

回答

2

這不是一個z-index的問題。它與OSX和Chrome處理滾動條的方式有關。我不知道確切的原因,但能夠通過設計scollbar僞元素來解決問題。

.the-table-with-offending-scrollbar::-webkit-scrollbar { 
     -webkit-appearance: none; 
     width: 7px; 
} 

.the-table-with-offending-scrollbar::-webkit-scrollbar-thumb { 
     border-radius: 4px; 
     background-color: rgba(0,0,0,.5); 
     -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); 
} 
+0

令人驚歎。這是令人煩惱的,但我很難找出問題並自己解決。感謝您分享您的解決方案! – Ari

相關問題