Web-kit，Css Clip強制滾動條

我有一個很大的精靈圖像和一個鏈接，鏈接有一個屬性父和圖像屬性的孩子。Web-kit，Css Clip強制滾動條

我正在使用css剪輯技術來拉出圖像的特定部分。然而，在我chrome瀏覽器即使我定位我的子元素絕對並給它一個溢出隱藏它是造成瀏覽器有垂直/水平滾動條。

.parent{ 
    margin-top: 10px; 
    text-decoration: none; 
    display: block; 

} 
.child { 
    border: 0; 
    position: absolute; 
    margin-top: -154px; 
    clip: rect(152px, 296px, 234px, 0px); 
    float: left; 
    overflow: hidden; 
}

用法： <a href="/" class="parent"> <img src="largeImage.png" class="child" /> </a>

在Firefox和Internet Explorer 8

來源

2010-08-13 Andrew

我使用在線圖像測試了您的代碼，但沒有看到任何帶有鉻的水平滾動條。請點擊此處http://jsbin.com/iguko – Sotiris 2010-08-14 10:37:44

將瀏覽器縮小至實際的實際圖像大小，您可以使用垂直滾動條而不會縮小它。 – Andrew 2010-08-14 23:56:53

的overflow屬性必須以隱藏的溢出部分內容被設置爲hidden父元素上工作細其子元素。

（旁白：overflow影響塊容器元素;我不知道如果有什麼它應該在其他元素做什麼見此處查看詳情：http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping）

你的CSS，更新：

.parent{ 
    margin-top: 10px; 
    text-decoration: none; 
    display: block; 
    overflow: hidden; 
} 

.child { 
    border: 0; 
    position: absolute; 
    margin-top: -154px; 
    clip: rect(152px, 296px, 234px, 0px); 
    float: left; 
}

來源

2011-07-18 20:49:17 ellisbben

http://jsfiddle.net/8TUnR/沒有馬上爲我工作;我不得不把父母定位在（** working fiddle **）http://jsfiddle.net/8TUnR/1/（並且將其大小設置爲後者，因爲其唯一的孩子不在流程中）。然後......回到Firefox ^^ – FelipeAls 2014-02-03 14:20:48

Web-kit，Css Clip強制滾動條

回答

相關問題