Question

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

我在IE中工作正常，但由于某种原因，它无法在Chrome中正常显示。

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

例如，button1应该只显示icons.png图像中的icon1，而button2应该只显示icons.png图像等中的icon2。

页面在IE中看起来如下（这是我希望它在所有浏览器中的样子）

在Chrome中，这就是它的样子：

我使用的image（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>

任何人都知道我做错了不能在Chrome上工作吗？

css剪辑无法正常工作

0 个答案: