Question

我有一个非常简单的HTML页面，其中包含以下正文：

<body>
    <div class="home">
        <img src="finalized3.png" usemap="#nav" hidefocus="true" />
        <map name="nav">
            <area shape="poly" coords="190,279,220,277,248,266,276,263,287,271,284,275,293,275,300,290,299,303,311,326,297,334,300,346,287,360,233,368,206,384,171,378,133,393,109,394,107,382,97,379,94,357,82,335,95,324,104,303,164,291" href="MENU.pdf"/>
            <area shape="poly" coords="642,271,702,291,724,291,741,300,799,316,809,328,807,336,817,346,804,369,805,391,790,394,778,405,763,407,705,384,687,386,668,375,603,357,597,339,588,331,600,311,603,283,621,282,627,273" href="eng-location.html"/>
            <area shape="rect" coords="331,563,814,597" href="mailto:restaurantharuhana@gmail.com"/>
        </map> 
    </div>
</body>

使用以下CSS代码：

body {
background-image: url(background.jpg);
}

.home {
    width: 910px;
    height: 740px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

img[usemap], map area{
    outline: none;
}

这在Firefox上看起来非常好，但在Chrome上，在较小的屏幕上，div会在顶部被切断。我希望div图像位于页面的中心，无论屏幕大小如何都不会被截断。我怎样才能解决这个问题？谢谢。

div用较小的屏幕切断了镀铬

0 个答案: