Html css剪辑无法正常工作_Html_Css_Clip

Html css剪辑无法正常工作

html css

Html css剪辑无法正常工作,html,css,clip,Html,Css,Clip,我正在尝试使用CSS在HTML页面中使用该剪辑我有它在IE中工作良好，但由于某些原因，它不能在Chrome中正确显示我尝试只使用一个图像（icons.png）并将其用于所有按钮，但每个按钮仅显示部分图像例如，button1应仅显示icons.png图像中的icon1，button2应仅显示icons.png图像中的icon2等 IE中的页面如下所示（这是我希望在所有浏览器中都是这样的）在Chrome中，它看起来是这样的：我使用的图像（icons.png）如下所示：我使用的代码如

我正在尝试使用CSS在HTML页面中使用该剪辑

我有它在IE中工作良好，但由于某些原因，它不能在Chrome中正确显示

我尝试只使用一个图像（icons.png）并将其用于所有按钮，但每个按钮仅显示部分图像

例如，button1应仅显示icons.png图像中的icon1，button2应仅显示icons.png图像中的icon2等

IE中的页面如下所示（这是我希望在所有浏览器中都是这样的）

在Chrome中，它看起来是这样的：

我使用的图像（icons.png）如下所示：

我使用的代码如下：

<style type="text/css">

/* Button Locations */
.icon1    { position:absolute;  left: 20px;  width:110px;   height:110px;   top:20px;   cursor: pointer; display: block; /* hand-shaped cursor */   cursor: hand; /* for IE 5.x */ }
.icon2    { position:absolute;  left: 180px; width:110px;   height:110px;   top:20px;   cursor: pointer; display: block; /* hand-shaped cursor */   cursor: hand; /* for IE 5.x */ }
.icon3    { position:absolute;  left: 340px; width:110px;   height:110px;   top:20px;   cursor: pointer; display: block; /* hand-shaped cursor */   cursor: hand; /* for IE 5.x */ }
.icon4    { position:absolute;  left: 100px;  width:110px;  height:110px;   top:170px;  cursor: pointer; display: block; /* hand-shaped cursor */   cursor: hand; /* for IE 5.x */ }
.icon5    { position:absolute;  left: 260px; width:110px;   height:110px;   top:170px;  cursor: pointer; display: block; /* hand-shaped cursor */   cursor: hand; /* for IE 5.x */ }
.icon6    { position:absolute;  left: 20px;  width:110px;   height:110px;   top:320px;  cursor: pointer; display: block; /* hand-shaped cursor */   cursor: hand; /* for IE 5.x */ }
.icon7    { position:absolute;  left: 180px; width:110px;   height:110px;   top:320px;  cursor: pointer; display: block; /* hand-shaped cursor */   cursor: hand; /* for IE 5.x */ }
.icon8    { position:absolute;  left: 340px; width:110px;   height:110px;   top:320px;  cursor: pointer; display: block; /* hand-shaped cursor */   cursor: hand; /* for IE 5.x */ }

/* Button Icons */
img.icon1_logo    { position:absolute;  left: 13px;  top:3px;  clip: rect(0px,307px,100px,0px); /* rect(top, right, bottom, left) */   cursor: pointer; /* hand-shaped cursor */    cursor: hand; /* for IE 5.x */ }
img.icon2_logo    { position:absolute;  left: -69px; top:3px;  clip: rect(0px,307px,100px,0px); /* rect(top, right, bottom, left) */   cursor: pointer; /* hand-shaped cursor */    cursor: hand; /* for IE 5.x */ }
img.icon3_logo    { position:absolute;  left: -160px;  top:-98px;  clip: rect(0px,307px,240px,0px); /* rect(top, right, bottom, left) */   cursor: pointer; /* hand-shaped cursor */    cursor: hand; /* for IE 5.x */ }
img.icon4_logo    { position:absolute;  left: -155px;  top:3px;  clip: rect(0px,390px,240px,0px); /* rect(top, right, bottom, left) */   cursor: pointer; /* hand-shaped cursor */  cursor: hand; /* for IE 5.x */ }
img.icon5_logo    { position:absolute;  left: 10px;  top:-101px;  clip: rect(0px,100px,240px,0px); /* rect(top, right, bottom, left) */   cursor: pointer; /* hand-shaped cursor */     cursor: hand; /* for IE 5.x */ }
img.icon6_logo    { position:absolute;  left: -75px;  top:-101px;  clip: rect(0px,180px,240px,0px); /* rect(top, right, bottom, left) */   cursor: pointer; /* hand-shaped cursor */    cursor: hand; /* for IE 5.x */ }
img.icon7_logo    { position:absolute;  left: 10px;  top:-200px;  clip: rect(0px,307px,285px,0px); /* rect(top, right, bottom, left) */   cursor: pointer; /* hand-shaped cursor */     cursor: hand; /* for IE 5.x */ }
img.icon8_logo    { position:absolute;  left: -75px;  top:-205px;  clip: rect(0px,307px,385px,0px); /* rect(top, right, bottom, left) */   cursor: pointer; /* hand-shaped cursor */    cursor: hand; /* for IE 5.x */ }

</style>

<body bgcolor="#DFDFDF">

    <button id="icon1" onclick="show_page('1');" class="icon1"><img class="icon1_logo" src="icons.png"/></button>

    <button id="icon2" onclick="show_page('2');" class="icon2"><img class="icon2_logo" src="icons.png"/></button>

    <button id="icon5" onclick="show_page('3');" class="icon5"><img class="icon5_logo" src="icons.png"/></button>

    <button id="icon4" onclick="show_page('4');" class="icon4"><img class="icon4_logo" src="icons.png"/></button>

    <button id="icon6" onclick="show_page('5');" class="icon6"><img class="icon6_logo" src="icons.png"/></button>

    <button id="icon3" onclick="show_page('6');" class="icon3"><img class="icon3_logo" src="icons.png"/></button>

    <button id="icon7" onclick="show_page('7');" class="icon7"><img class="icon7_logo" src="icons.png"/></button>

    <button id="icon8" onclick="show_page('8');" class="icon8"><img class="icon8_logo" src="icons.png"/></button>

</body>


/*按钮位置*/
.icon1{位置：绝对；左侧：20px；宽度：110px；高度：110px；顶部：20px；光标：指针；显示：块；/*手形光标*/光标：手；/*用于IE 5.x*/}
.icon2{位置：绝对；左侧：180px；宽度：110px；高度：110px；顶部：20px；光标：指针；显示：块；/*手形光标*/光标：手；/*用于IE 5.x*/}
.icon3{位置：绝对；左侧：340px；宽度：110px；高度：110px；顶部：20px；光标：指针；显示：块；/*手形光标*/光标：手；/*用于IE 5.x*/}
.icon4{位置：绝对；左侧：100px；宽度：110px；高度：110px；顶部：170px；光标：指针；显示：块；/*手形光标*/光标：手；/*用于IE 5.x*/}
.icon5{位置：绝对；左侧：260px；宽度：110px；高度：110px；顶部：170px；光标：指针；显示：块；/*手形光标*/光标：手；/*用于IE 5.x*/}
.icon6{位置：绝对；左侧：20px；宽度：110px；高度：110px；顶部：320px；光标：指针；显示：块；/*手形光标*/光标：手；/*用于IE 5.x*/}
.icon7{位置：绝对；左侧：180px；宽度：110px；高度：110px；顶部：320px；光标：指针；显示：块；/*手形光标*/光标：手；/*用于IE 5.x*/}
.icon8{位置：绝对；左侧：340px；宽度：110px；高度：110px；顶部：320px；光标：指针；显示：块；/*手形光标*/光标：手；/*用于IE 5.x*/}
/*按钮图标*/
img.icon1_徽标{位置：绝对；左侧：13px；顶部：3px；剪辑：rect（0px，307px，100px，0px）；/*rect（顶部，右侧，底部，左侧）*/cursor:pointer；/*手形光标*/cursor:hand；/*适用于IE 5.x*/}
img.icon2_徽标{位置：绝对；左侧：-69px；顶部：3px；剪辑：rect（0px，307px，100px，0px）；/*rect（顶部，右侧，底部，左侧）*/光标：指针；/*手形光标*/光标：手；/*用于IE 5.x*/}
img.icon3_徽标{位置：绝对；左：-160px；顶：-98px；剪辑：rect（0px，307px，240px，0px）；/*rect（上，右，下，左）*/光标：指针；/*手形光标*/光标：手；/*用于IE 5.x*/}
img.icon4_徽标{位置：绝对；左侧：-155px；顶部：3px；剪辑：rect（0px，390px，240px，0px）；/*rect（顶部，右侧，底部，左侧）*/cursor:pointer；/*手形光标*/cursor:hand；/*适用于IE 5.x*/}
img.icon5_徽标{位置：绝对；左：10px；顶部：-101px；剪辑：rect（0px，100px，240px，0px）；/*rect（上，右，下，左）*/光标：指针；/*手形光标*/光标：手；/*用于IE 5.x*/}
img.icon6_徽标{位置：绝对；左：-75px；顶：-101px；剪辑：rect（0px，180px，240px，0px）；/*rect（上，右，下，左）*/光标：指针；/*手形光标*/光标：手；/*用于IE 5.x*/}
img.icon7_徽标{位置：绝对；左：10px；顶部：-200px；剪辑：rect（0px，307px，285px，0px）；/*rect（上，右，下，左）*/光标：指针；/*手形光标*/光标：手；/*用于IE 5.x*/}
img.icon8_徽标{位置：绝对；左：-75px；顶：-205px；剪辑：rect（0px，307px，385px，0px）；/*rect（上，右，下，左）*/光标：指针；/*手形光标*/光标：手；/*用于IE 5.x*/}

有人知道我做错了什么，因为它不能在Chrome中工作吗？

剪辑没有贬值吗？MDN说是的。已弃用

此功能已从Web标准中删除。尽管某些浏览器可能仍然支持它，但它正在被删除。不要在旧项目或新项目中使用它。使用它的网页或Web应用程序可能随时中断。

是否有其他东西取代了它？现在有没有一种新的方法来实现这一点，或者我需要使用单独的文件在我的情况下需要使用8个不同的图像每个按钮一个？