html - 与 Chrome/Firefox 的兼容性问题

Question

我的网站位于:http://www.innexdesign.co.uk/dev .该站点在 IE 中完美运行，大多数页面在 Firefox 和 Chrome 中也很好。但是，如果我们导航到“设计”菜单并将鼠标悬停在以下选项上:“饮用设计”、“饮食设计”等，当您将鼠标悬停在它们上方时，您会看到 Logo 和更合适的 div 似乎向下移动了一点。类似地，如果您选择“饮酒设计”并将鼠标悬停在各个酒吧上，您将再次看到 Logo 和页脚 div 在您将鼠标悬停在它们上面时似乎向下移动了页面。这也发生在“饮食设计”、“住房设计”和“ sleep 设计”中。

我假设你们只要访问网站就能看到所有代码，但我会在下面粘贴一些代码以防万一:

样式.css:

@font-face {
   font-family: shruti;
   src: url(‘shruti.ttf’);
}

html, body, div, ul {
    margin: 0;
    padding: 0;
}

body {
    background-color : #040404;
    background-image : url(images/bk.jpg);
    background-position : top;
    background-repeat : repeat-x;
    margin : 0;
    padding : 0;
    font-family : shruti, Arial, Geneva;
    font-size : 90%;
    line-height:100%;
}
p {
    font-family : shruti, Arial, Geneva;
    font-weight:bold;
    font-size : 100%;
    line-height:normal;
    padding: 5px;
}
h1 {
    font-size : 24px;
    padding-bottom:10px;    
}

h2 {
    padding-bottom:10px;
}
ul {
    list-style : none;
    padding : 0;
    margin : 0;
}
a:link {
    color : #000;
    text-decoration : none;
    color : #000;
}
a:active {
    font-style : italic;
    color : #000;
}
a:visited {
    font-style : italic;
    color : #00C;
}
a {
    outline: none;
}

a img {
    vertical-align: top;


}

a img.last {
    margin-right: 0;    
}

img {
    border : none;
}
#wrapper {
    width : 994px;
    margin : 0 auto;
    background-color : #e3d9b9;
}
#header {
    width : 994px;
    height : 483px;
    margin : 0 auto;
}
#page {
    width : 994px;
    position : relative;
    background-image : url(images/page_bk.jpg);
    background-repeat : no-repeat;
    background-position : top;
    background-color : #b08f40;
}
#pageheader {
    width : 100%;
    height : 220px;
    position : relative;
    background-image : url(images/header_bk.png);
    background-repeat : no-repeat;
    background-position : top;
}
#logo {
width : 143px;
height : 206px;
position : relative;
padding : 10px 10px 0 10px;
float : left;
}
#social {
float : left;
padding : 10px 10px 0 10px;
}
#content {
    width : 994px;
    min-height:200px;
    margin : 0 auto;
    padding : 0;
    background-image : url(images/homepage_bk.jpg);
    background-position : top;
    background-repeat : no-repeat;
    background-color : #b08f40;
    overflow:auto;
}
#logosother {
    height: 160px;
    width: 994px;
    margin: 0 auto;
    background-color: #e3d9b9;
    background-image: url(images/top_footer.jpg);
    background-position: top;
    background-repeat: no-repeat;
    clear:both;

}
.logos {
    height:52px;
    width: 400px;
    padding: 10px;
    float:left;
    margin-top:82px;
    background-color : #e3d9b9;
}
.carbon {
    height:90px;
    width: 159px;
    padding: 10px;
    float:right;
    margin-top:42px;
    background-color : #e3d9b9;
}
.googleplus {
    width:50px;
    height:32px;
    padding: 10px;
    margin-top:98px;
    margin-left:130px;  
    float:left;
}
.homelogos {
    height:52px;
    width: 974px;   
    padding: 10px;
    float:left;
    margin-top:52px;
    background-color : #e3d9b9; 
}
#pagecontent {
    width : 100%;
    padding : 0;
    overflow : auto;
}
#left {
    width : 200px;
    float : left;
}
#homeleft {
    width : 200px;
    float : left;
}
.menu {
    margin-left : 10px;
    margin-top : 20px;
    margin-bottom : 10px;
}
.menu li {
    border-bottom : 1px solid #f9f5e7;
    border-top : 1px solid #a79c78;
    padding-bottom : 5px;
    padding-top : 5px;
    padding-left : 10px;
}
.menu li a {
    font-size : 18px;
    color : #000;
    font-weight:bold;
}
.menu li a:hover {
    font-weight : bold;
    font-style : italic;
    color : #000;
}
.menu li a:active {
    font-weight : bold;
    font-style : italic;
    color : #000;
}
.menu li a:visited {
    font-weight : bold;
    font-style : italic;
    color : #000;
}
.menu .first {
    border-top : none;
}
.menu .last {
    border-bottom : none;
}
#homeright {
    width : 700px;
    margin-left : 20px;
    float : left;
    padding-top : 20px;
    overflow:auto;

}
#right {
    width : 700px;
    margin-left : 20px;
    float : left;
    font-size : 14px;
    font-weight : normal;
    line-height : normal;
    padding-top : 20px;
}
#newright {
width : 730px;
min-height:300px;
float : left;
font-size : 14px;
font-weight : bold;
line-height : 135%;
margin-left : 30px;
padding-top : 20px;
}
.service_menu {
width : 190px;
float:left;
}
.service_menu li {
padding : 8px 0;
width:180px;
border-bottom:1px solid #000;
}
.service_menu li a {
font-size : 14px;
color : #000;
}
.service_menu li a:hover {
font-weight : bold;
font-style : italic;
color : #000;
}
.service_menu li a:active {
font-weight : bold;
font-style : italic;
color : #000;
}
.service_menu li a:visited {
color : #000;
}
.service_menu .first {
border-top : none;
}
.service_menu .last {
border-bottom : none;
}
.serv {
    min-height:300px;
}
.des3 {
float : left;
width : 300px;
margin-left:20px;
}
.desimg3 {
float : left;
width : 340px;
}
#footer {
    width : 984px;
    height : 40px;
    margin : 0 auto;
    font-size : 12px;
    padding : 5px;
    clear : both;
    background-image : url(images/footer_bk.jpg);
    background-repeat : repeat-x;
    color: #000;
}

.msg_list {
margin : 0;
padding : 0;
width : 670px;
float : left;
}
.msg_head {
cursor : pointer;
position : relative;
background-image : url(images/expand_bk.png);
background-repeat : repeat-x;
height : 29px;
line-height : 29px;
color : #000;
margin : 1px;
font-size : 12px;
padding-left : 10px;
}
.msg_head :hover {
padding : 5px 10px;
cursor : pointer;
position : relative;
background-color : #fff;
color : #fff;
margin : 1px;
font-size : 16px;
}
.msg_body {
overflow : auto;
padding : 10px 10px;
}
.msg_body p {
font-size : 12px;
line-height : 150%;
font-weight : normal;
}
.des {
float : left;
width : 300px;
padding-right:10px;
}
.desimg {
float : left;
width : 340px;
}

.msg_list1 {
margin : 0;
padding : 0;
width : 300px;
float : left;
}
.msg_head1 {
cursor : pointer;
position : relative;
height : 31px;
}
.msg_head1 :hover {
cursor : pointer;
position : relative;
}
.msg_body1 {
overflow : auto;
padding : 0 10px;
}
.msg_body1 p {
font-size : 12px;
line-height : 150%;
font-weight : normal;
}
.des1 {
float : left;
width : 300px;
margin-right : 10px;
margin-bottom:10px;
margin-top:10px;
}

.desimg1 {
float : left;
width : 340px;
}

.newdes {
float : left;
width : 340px;
margin-right : 10px;
}
.msg_list2 {
margin : 0;
padding : 0;
width : 360px;
float : left;
}
.msg_head2 {
cursor : pointer;
position : relative;
background-image : url(images/expand_bk.png);
background-repeat : repeat-x;
height : 31px;
line-height : 31px;
color : #000;
margin : 1px;
font-size : 12px;
padding-left : 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px; /* for old Konqueror browsers */
}
.msg_head2 :hover {
cursor : pointer;
position : relative;
margin : 1px;
}
.msg_body2 {
overflow : auto;
padding : 0 10px;
margin-bottom:10px;
}
.msg_body2 p {
font-size : 12px;
line-height : 150%;
font-weight : normal;
padding:0px;
}
.newdes2 {
float : left;
width : 340px;
margin-bottom:10px;
}
.desimg2 {
float : left;
width : 340px;
}


.servintro {
margin : 0;
padding : 0;
width : 700px;
overflow : auto;
}
.servintrotext {
float : left;
width : 270px;
padding : 0 10px 10px 10px;
}
.servintroimg {
float : left;
width : 340px;
}
#slider {
width : 994px;
height : 483px;
margin-bottom : 10px;
margin-left : auto;
margin-right : auto;
}
#slider ul, #slider li {
margin : 0;
padding : 0;
list-style : none;
}
#slider li {
width : 994px;
height : 483px;
overflow : hidden;
}
.headerimg {
background-position : center top;
background-repeat : no-repeat;
width : 994px;
height : 483px;
position : absolute;
}
.testimonial {
border : 1px solid #000;
padding : 10px;
margin-bottom : 10px;
margin-top : 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
.office {
border : 1px solid #000;
padding : 10px;
margin-bottom : 10px;
margin-top : 10px;
width:100%;
height:265px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
* {
padding : 0;
}
#TB_window {
font : 12px Arial, Helvetica, sans-serif;
color : #333333;
}
#TB_secondLine {
font : 10px Arial, Helvetica, sans-serif;
color : #666666;
}
#TB_window a:link {
color : #666666;
}
#TB_window a:visited {
color : #666666;
}
#TB_window a:hover {
color : #000;
}
#TB_window a:active {
color : #666666;
}
#TB_window a:focus {
color : #666666;
}
#TB_overlay {
position : fixed;
z-index : 100;
top : 0;
left : 0;
height : 100%;
width : 100%;
}
.TB_overlayMacFFBGHack {
background : url(macFFBgHack.png) repeat;
}
.TB_overlayBG {
background-color : #000;
}
* html #TB_overlay {
position : absolute;
}
#TB_window {
position : fixed;
background : #ffffff;
z-index : 102;
color : #000000;
display : none;
border : 4px solid #525252;
text-align : left;
top : 50%;
left : 50%;
}
* html #TB_window {
position : absolute;
}
#TB_window img#TB_Image {
display : block;
margin : 15px 0 0 15px;
border-right : 1px solid #ccc;
border-bottom : 1px solid #ccc;
border-top : 1px solid #666;
border-left : 1px solid #666;
}
#TB_caption {
height : 25px;
padding : 7px 30px 10px 25px;
float : left;
}
#TB_closeWindow {
height : 25px;
padding : 11px 25px 10px 0;
float : right;
}
#TB_closeAjaxWindow {
padding : 7px 10px 5px 0;
margin-bottom : 1px;
text-align : right;
float : right;
}
#TB_ajaxWindowTitle {
float : left;
padding : 7px 0 5px 10px;
margin-bottom : 1px;
}
#TB_title {
background-color : #e8e8e8;
height : 27px;
}
#TB_ajaxContent {
clear : both;
padding : 2px 15px 15px 15px;
overflow : auto;
text-align : left;
line-height : 1.4em;
}
#TB_ajaxContent.TB_modal {
padding : 15px;
}
#TB_ajaxContent p {
padding : 5px 0 5px 0;
}
#TB_load {
position : fixed;
display : none;
height : 13px;
width : 208px;
z-index : 103;
top : 50%;
left : 50%;
margin : -6px 0 0 -104px;
}
* html #TB_load {
position : absolute;
}
#TB_HideSelect {
z-index : 99;
position : fixed;
top : 0;
left : 0;
background-color : #fff;
border : none;
height : 100%;
width : 100%;
}
* html #TB_HideSelect {
position : absolute;
}
#TB_iframeContent {
clear : both;
border : none;
margin-bottom : -1px;
margin-top : 1px;
}
hr {
    border: none;
    height: 1px; line-height: 1px;
    background: #E5E5E5;
    margin-bottom: 20px;
    padding: 0;
}

.designimage {
    width:500px;
    height:300px;
    margin-bottom:10px;
    float:left;
    border:solid 2px #000;  
}
.designlogo {
    width:500px;
    height:100px;
    margin-bottom:10px;
    float:left; 
}
.mapleft {
    float:left;
    width:220px;
}
.mapcenter {
    float:left;
    width:260px;
    margin-bottom:10px;
}
.mapright {
    float:left;
    width:220px;
}

all-ie-only.css

# font-face {
   font-family: shruti;
   src: url(‘shruti.ttf’);
}

html, body, div, ul {
    margin: 0;
    padding: 0;
}

body {
    background-color : #040404;
    background-image : url(images/bk.jpg);
    background-position : top;
    background-repeat : repeat-x;
    margin : 0;
    padding : 0;
    font-family : shruti, Arial, Geneva;
    font-size : 90%;
    line-height:150%;   
}
p {
    font-family : shruti, Arial, Geneva;
    font-weight:normal;
    font-size : 90%;
    line-height:150%;
    padding: 5px;
}
h1 {
    font-size : 24px;
    padding-bottom:10px;    
}

h2 {
    padding-top:10px;
    padding-bottom:10px;
}
ul {
    list-style : none;
    padding : 0;
    margin : 0;
}
a:link {
    color : #000;
    text-decoration : none;
    color : #000;
}
a:active {
    color : #000;
}
a:visited {
    color : #000;
}
a {
    outline: none;
}

a img {
    vertical-align: top;
}

a img.last {
    margin-right: 0;    
}

img {
    border : none;
}
#wrapper {
    width : 994px;
    margin : 0 auto;
    background-color : #e3d9b9;
}
#header {
    width : 994px;
    height : 483px;
    margin : 0 auto;
}
#page {
    width : 994px;
    position : relative;
    background-image : url(images/page_bk.jpg);
    background-repeat : no-repeat;
    background-position : top;
    background-color : #b08f40;
}
#pageheader {
width : 100%;
height : 248px;
position : relative;
background-image : url(images/header_bk.png);
background-repeat : no-repeat;
background-position : top;
}
#logo {
width : 143px;
height : 206px;
position : relative;
padding : 10px 10px 0 10px;
float : left;
}
#social {
float : left;
padding : 10px 10px 0 10px;
}
#content {
    width : 994px;
    min-height:200px;
    margin : 0 auto;
    padding : 0;
    background-image : url(images/homepage_bk.jpg);
    background-position : top;
    background-repeat : no-repeat;
    background-color : #b08f40;
    overflow:auto;
}
#logosother {
    height: 160px;
    width: 994px;
    margin: 0 auto;
    background-color: #e3d9b9;
    background-image: url(images/top_footer.jpg);
    background-position: top;
    background-repeat: no-repeat;
    clear:both;
}
.logos {
    height:52px;
    padding: 12px;
    float:left;
    margin-top:82px;
    background-color : #e3d9b9; 
}
.carbon {
    height:90px;
    width: 159px;   
    padding: 10px;
    float:right;
    margin-top:42px;
    background-color : #e3d9b9; 
}
.googleplus {
    width:50px;
    height:32px;
    padding: 10px;
    margin-top:92px;
    margin-left:210px;  
    float:left;
}
.homelogos {
    height:52px;
    width: 974px;   
    padding: 10px;
    float:left;
    margin-top:52px;
    background-color : #e3d9b9; 
}
#pagecontent {
    width : 100%;
    padding : 0;
    overflow : auto;
}
#left {
    width : 200px;
    float : left;
}
#homeleft {
    width : 200px;
    float : left;
}
.menu {
    margin-left : 10px;
    margin-top : 20px;
    margin-bottom : 10px;
}
.menu li {
    border-bottom : 1px solid #f9f5e7;
    border-top : 1px solid #a79c78;
    padding-bottom : 5px;
    padding-top : 5px;
    padding-left : 10px;
}
.menu li a {
    font-size : 18px;
    color : #000;
    font-weight:bold;
    text-decoration:none;
}
.menu li a:hover {
    font-weight : bold;
    font-style : italic;
    color : #000;
    text-decoration:none;   
}
.menu li a:active {
    font-weight : bold;
    color : #000;
    text-decoration:none;   
}
.menu li a:visited {
    font-weight : bold;
    color : #000;
    text-decoration:none;   
}
.menu .first {
    border-top : none;
}
.menu .last {
    border-bottom : none;
}
#homeright {
    width : 700px;
    margin-left : 20px;
    float : left;
    padding-top : 20px;
    overflow:auto;

}
#right {
    width : 700px;
    padding-left : 20px;
    float : left;
    font-size : 14px;
    font-weight : bold;
    line-height : 135%;
    padding-top : 20px;
    overflow:hidden;
}
#newright {
    width : 700px;
    padding-left : 20px;
    float : left;
    font-size : 14px;
    font-weight : bold;
    line-height : 135%;
    padding-top : 20px;
    overflow:hidden;
}
.service_menu {
width : 190px;
float:left;
}
.service_menu li {
padding : 8px 0;
width:180px;
border-bottom:1px solid #000;
}
.service_menu li a {
font-size : 14px;
color : #000;
}
.service_menu li a:hover {
font-weight : bold;
font-style : italic;
color : #000;
}
.service_menu li a:active {
font-weight : bold;
font-style : italic;
color : #000;
}
.service_menu li a:visited {
color : #000;
}
.service_menu .first {
border-top : none;
}
.service_menu .last {
border-bottom : none;
}
.serv {
    min-height:300px;
}
.des3 {
float : left;
width : 300px;
margin-left:20px;
}
.desimg3 {
float : left;
width : 340px;
}
#footer {
    width : 984px;
    height : 40px;
    margin : 0 auto;
    font-size : 12px;
    padding : 5px;
    clear : both;
    background-image : url(images/footer_bk.jpg);
    background-repeat : repeat-x;
}

.msg_list {
margin : 0;
padding : 0;
width : 670px;
float : left;
}
.msg_head {
cursor : pointer;
position : relative;
background-image : url(images/expand_bk.png);
background-repeat : repeat-x;
height : 29px;
line-height : 29px;
color : #000;
margin : 1px;
font-size : 12px;
padding-left : 10px;
}
.msg_head :hover {
padding : 5px 10px;
cursor : pointer;
position : relative;
background-color : #fff;
color : #fff;
margin : 1px;
font-size : 16px;
}
.msg_body {
overflow : auto;
padding : 10px 10px;
}
.msg_body p {
font-size : 12px;
line-height : 150%;
font-weight : normal;
}
.des {
float : left;
width : 300px;
padding-right:10px;
}
.desimg {
float : left;
width : 340px;
}

.msg_list1 {
margin : 0;
padding : 0;
width : 300px;
float : left;
}
.msg_head1 {
cursor : pointer;
position : relative;
height : 31px;
}
.msg_head1 :hover {
cursor : pointer;
position : relative;
}
.msg_body1 {
overflow : auto;
padding : 0 10px;
}
.msg_body1 p {
font-size : 12px;
line-height : 150%;
font-weight : normal;
}
.des1 {
float : left;
width : 300px;
margin-right : 10px;
margin-bottom:10px;
margin-top:10px;
}

.desimg1 {
float : left;
width : 340px;
}

.newdes {
float : left;
width : 340px;
margin-right : 10px;
}
.msg_list2 {
margin : 0;
padding : 0;
width : 360px;
float : left;
}
.msg_head2 {
cursor : pointer;
position : relative;
background-image : url(images/expand_bk.png);
background-repeat : repeat-x;
height : 31px;
line-height : 31px;
color : #000;
margin : 1px;
font-size : 12px;
padding-left : 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px; /* for old Konqueror browsers */
}
.msg_head2 :hover {
cursor : pointer;
position : relative;
margin : 1px;
}
.msg_body2 {
overflow : auto;
padding : 0 10px;
margin-bottom:10px;
}
.msg_body2 p {
font-size : 12px;
line-height : 150%;
font-weight : normal;
padding:0px;
}
.newdes2 {
float : left;
width : 340px;
margin-bottom:10px;
}
.desimg2 {
float : left;
width : 340px;
}


.servintro {
margin : 0;
padding : 0;
width : 700px;
overflow : auto;
}
.servintrotext {
float : left;
width : 270px;
padding : 0 10px 10px 10px;
}
.servintroimg {
float : left;
width : 340px;
}
#slider {
width : 994px;
height : 483px;
margin-bottom : 10px;
margin-left : auto;
margin-right : auto;
}
#slider ul, #slider li {
margin : 0;
padding : 0;
list-style : none;
}
#slider li {
width : 994px;
height : 483px;
overflow : hidden;
}
.headerimg {
background-position : center top;
background-repeat : no-repeat;
width : 994px;
height : 483px;
position : absolute;
}
.testimonial {
border : 1px solid #000;
padding : 10px;
margin-bottom : 10px;
margin-top : 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
.office {
border : 1px solid #000;
padding : 10px;
margin-bottom : 10px;
margin-top : 10px;
width:100%;
height:265px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
* {
padding : 0;
margin : 0;
}
#TB_window {
font : 12px Arial, Helvetica, sans-serif;
color : #333333;
}
#TB_secondLine {
font : 10px Arial, Helvetica, sans-serif;
color : #666666;
}
#TB_window a:link {
color : #666666;
}
#TB_window a:visited {
color : #666666;
}
#TB_window a:hover {
color : #000;
}
#TB_window a:active {
color : #666666;
}
#TB_window a:focus {
color : #666666;
}
#TB_overlay {
position : fixed;
z-index : 100;
top : 0;
left : 0;
height : 100%;
width : 100%;
}
.TB_overlayMacFFBGHack {
background : url(macFFBgHack.png) repeat;
}
.TB_overlayBG {
background-color : #000;
}
* html #TB_overlay {
position : absolute;
}
#TB_window {
position : fixed;
background : #ffffff;
z-index : 102;
color : #000000;
display : none;
border : 4px solid #525252;
text-align : left;
top : 50%;
left : 50%;
}
* html #TB_window {
position : absolute;
}
#TB_window img#TB_Image {
display : block;
margin : 15px 0 0 15px;
border-right : 1px solid #ccc;
border-bottom : 1px solid #ccc;
border-top : 1px solid #666;
border-left : 1px solid #666;
}
#TB_caption {
height : 25px;
padding : 7px 30px 10px 25px;
float : left;
}
#TB_closeWindow {
height : 25px;
padding : 11px 25px 10px 0;
float : right;
}
#TB_closeAjaxWindow {
padding : 7px 10px 5px 0;
margin-bottom : 1px;
text-align : right;
float : right;
}
#TB_ajaxWindowTitle {
float : left;
padding : 7px 0 5px 10px;
margin-bottom : 1px;
}
#TB_title {
background-color : #e8e8e8;
height : 27px;
}
#TB_ajaxContent {
clear : both;
padding : 2px 15px 15px 15px;
overflow : auto;
text-align : left;
line-height : 1.4em;
}
#TB_ajaxContent.TB_modal {
padding : 15px;
}
#TB_ajaxContent p {
padding : 5px 0 5px 0;
}
#TB_load {
position : fixed;
display : none;
height : 13px;
width : 208px;
z-index : 103;
top : 50%;
left : 50%;
margin : -6px 0 0 -104px;
}
* html #TB_load {
position : absolute;
}
#TB_HideSelect {
z-index : 99;
position : fixed;
top : 0;
left : 0;
background-color : #fff;
border : none;
height : 100%;
width : 100%;
}
* html #TB_HideSelect {
position : absolute;
}
#TB_iframeContent {
clear : both;
border : none;
margin-bottom : -1px;
margin-top : 1px;
}
hr {
    border: none;
    height: 1px; line-height: 1px;
    background: #E5E5E5;
    margin-bottom: 20px;
    padding: 0;
}

.designimage {
    width:500px;
    height:300px;
    margin-bottom:10px;
    float:left;
    border:solid 2px #000;  
}
.mapleft {
    float:left;
    width:220px;
}
.mapcenter {
    float:left;
    width:260px;
    margin-bottom:10px;
}
.mapright {
    float:left;
    width:220px;
    margin-top:180px;
}

我的设计页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Innex Design | Services</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="slider.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
        <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->  
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/easySlider1.5.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){   
            $(".slider").easySlider({
                auto: true,
                continuous: true 
            });
        }); 
    </script>
</head>

<body>
<div id="wrapper">
<div id="page">
<div id="pageheader">
    <div id="logo"> <a href="index.html" target="_self"><img src="images/innexdesign_logo.jpg" width="143" height="206" alt="Innex Design Logo" /></a>
    </div>
    <div id="social">
        <a href="http://twitter.com/#!/InnexDesign" target="_new"><img src="images/twitter.png" width="41" height="40" alt="Innex Design on Twitter" /></a>
        <a href="http://www.facebook.com/innexdesignltd" target="_new"><img src="images/facebook.png" width="41" height="40" alt="Innex Design on Facebook" /></a>
         <a href="contactform.html" title="Request a Callback" target="_new"><img src="images/callback.png" alt="" width="77" height="40" /></a>
        <a href="contactform.html" title="Leave Your Details and Sign up to our News Letter" target="_new"><img src="images/Newsletter Image.png" alt="" width="77" height="40" /></a></div>
    </div>

<div id="pagecontent">

    <div id="left">
    <ul class="menu">
    <li class="first"><a href="index.html">HOME</a></li>
    <li><a href="profile.html">PROFILE</a></li>
    <li><a href="services.html">DESIGNS</a></li>
    <li><a href="testimonials.html">TESTIMONIALS</a></li>    
    <li class="last"><a href="contact.html">CONTACT</a></li>
    </ul>

    <p style="text-align:center; font-weight:bold;">CELEBRATING<br /><span style="font-size:22px">21</span><br />YEARS<br />1991-2012</p>
    </div>

    <div id="right">

        <h1>DESIGNS</h1>

        <div class="service_menu">
        <ul>
        <li><a href="drinking.html">Designs for Drinking</a></li>
        <li><a href="eating.html">Designs for Eati

Answer 1

给链接添加一些行高可以解决这个问题:

.service_menu li a {
    font-size: 14px;
    color: black;
    line-height: 14px;
}

...或者为了更加灵活，您还可以这样写:

line-height:1em;