標籤：alt 右箭頭 bsp head logs height idt int 瀏覽器
預期效果
實際效果，在瀏覽器中開啟該html檔案時，瀏覽器只顯示左箭頭，不顯示右箭頭
html代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{margin:0;padding:0;}
#container
{
width:600px;
height: 400px;
margin: 0 auto;
position: relative;
overflow: hidden;
background-color:#00b;
}
#container #leftBtn
{
position: absolute;
width:45px;
height: 45px;
top:108px;
left: 20px;
background: url(‘images/icon/icon.png‘) no-repeat 0 0;
cursor: pointer;
}
#container #rightBtn
{
position: absolute;
width:45px;
height: 45px;
top:108px;
right: 20px;
background: url(images/icon/icon.png) no-repeat 0 -45px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<div id="btn">
<div id="leftBtn"></div>
<div id="rightBtn"></div>
</div>
</div>
</body>
</html>
css中調用的icon.png圖片如下：
解決辦法：
後來在左箭頭和右箭頭樣式的中間加了一行*{margin:0;padding:0;}，然後問題解決。
雖然問題解決，但是依然不知道是什麼原因導致。記錄在此，若有同學知道，還希望不吝賜教。
html定義好的css樣式不能被渲染
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
