2016-12-21 4 views
2

オンラインで見つかったサブメニュー付きのCSSドロップダウンメニューを作成しています。私には奇妙な問題があります。私は正常に動作している文字セットのすべてを指定しない場合は、Chromeでサイズ変更ウィンドウのスクリーンショットを参照してください。utf-8、空のコンテンツエリアを使用すると、奇妙なhtmlの動作

メニューOKタイ語の文字は、私が<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> を追加し、これは私が得るものですその後

enter image description here

スクランブル: OK

タイ語の文字が、マヌー」奇妙な

enter image description here

あなたはchareset行を削除しようと、ここでは、コードを自分で試すことができますし、[OK]を次のようになります。

<html> 
 
<head> 
 
<meta http-equiv="Content-Language" content="en-th"> 
 
<meta http-equiv="X-UA-Compatible" content="IE=8" /> 
 
<meta name="viewport" content="width=device-width, maximum-scale=1.5"> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<title>Ice cream</title> 
 
<style> 
 
.all {width:100%;text-align:center} 
 
.one {margin:0 auto;display:inline-block;font-weight:bold;font-family:times new roman,serif;font-size:16px} 
 
a:hover {text-decoration:underline} 
 
ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0 auto; 
 
    } 
 

 
ul li { 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
    width:144px; 
 
    background: #240F0A; 
 
} 
 

 
/* This hides the dropdowns */ 
 

 

 
li ul { display: none; } 
 

 
ul li a { 
 
    display: block; 
 
    padding: 0.5em; 
 
    text-decoration: none; 
 
    white-space: nowrap; 
 
    color: #BCA363; 
 
} 
 

 
ul li a:hover { background: #402015; } 
 

 
/* Display the dropdown */ 
 

 

 
li:hover > ul { 
 
    display: block; 
 
    position: absolute; 
 
    z-index:2; 
 
} 
 

 
li:hover li { float: none; } 
 

 
li:hover a { background: #402015; } 
 

 
li:hover li a:hover { background: #402015; } 
 

 
.main-navigation li ul li { border-top: 0; } 
 

 
/* Displays second level dropdowns to the right of the first level dropdown */ 
 

 

 
ul ul ul { 
 
    left: 100%; 
 
    top: 0; 
 
} 
 

 
/* Simple clearfix */ 
 

 

 

 
ul:before, 
 
ul:after { 
 
    content: " "; /* 1 */ 
 
    display: table; /* 2 */ 
 
} 
 

 
ul:after { clear: both; } 
 
</style> 
 
</head> 
 

 
<body bgcolor="#240F0A" text="#FFFFFF" bottommargin="0"> 
 
<div class="all"> 
 
<div class="one"> 
 
<ul class="main-navigation"> 
 
    <li><a href="ice-cream-Thai.html" title="ไอศกรีม, ไอศครีม">ไอศครีม</a></li> 
 
    <li><a href="index.html" title="Ice cream production and sale">HOME</a></li> 
 
    <li><a href="#" title="About Ice Age ice cream company">ABOUT US</a> 
 
    <ul> 
 
     <li><a href="aboutus.html" title="About Ice Age ice cream company">The Company</a></li> 
 
     <li><a href="aboutus.html#ice-age-history" title="History of Ice Age ice cream company">History</a> 
 
     <li><a href="#" title="Contacts Ice Age ice cream company">Contacts</a> 
 
     <ul> 
 
<li><a href="contacts.html#email" title="About Ice Age ice cream company">Email</a></li> 
 
<li><a href="contacts.html#address" title="Postal address Ice Age ice cream company">Address</a></li> 
 
      <li><a href="contacts.html#location" title="Road map and location Ice Age ice cream company">Location</a></li> 
 
      <li><a href="contacts.html" title="Ice cream Ice Age contacts page">All contacts</a></li> 
 
     </ul></li></ul></li> 
 
    <li><a href="#" title="Ice cream">ICE CREAM</a> 
 
    <ul> 
 
     <li><a href="#" title="Sherbet">Sherbet</a></li> 
 
     <li><a href="ice-cream.html#Itlian-gelato" title="Ice cream">Italian Gelato</a></li> 
 
     <li><a href="ice-cream.html#Thai-ice-cream" title="Ice cream">Thai Ice Cream</a></li> 
 
     <li><a href="ice-cream.html#Japanese-ice-cream" title="Ice cream">Japanese cream</a></li> 
 
     <li><a href="ice-cream.html" title="Ice cream">Classic ice cream</a></li> 
 
     <li><a href="http://iceagethai.com/ice-cream-shop/xxxxx.php" title="Ice cream">Promotion</a></li> 
 
     <li><a href="#" title="Ice cream flavors">Flavors</a> 
 
     <ul> 
 
     <li><a href="ice-cream-flavors.html#sherbet" title="Sherbet flavors">Sherbet Flavors</a></li> 
 
     <li><a href="ice-cream-flavors.html#sherbet" title="Sherbet flavors">Gelato Flavors</a></li> 
 
     <li><a href="ice-cream-flavors.html#sherbet" title="Sherbet flavors">Thai Flavors</a></li> 
 
     <li><a href="ice-cream-flavors.html#sherbet" title="Sherbet flavors">Japanese Flavors</a></li> 
 
     <li><a href="ice-cream-flavors.html#sherbet" title="Sherbet flavors">Classic Flavors</a></li> 
 
     <li><a href="ice-cream-flavors.html#sherbet" title="Sherbet flavors">All Flavors</a></li> 
 
     </ul></li></ul></li> 
 
    <li><a href="#">About Us</a></li> 
 
    <li><a href="#">About Us2</a></li> 
 
     <li><a href="#">About Us3</a></li> 
 
     <li><a href="#">About Us4</a></li> 
 
</ul> 
 
</div> 
 
</div> 
 

 
</body> 
 
</html>
がどのように空のスペースを避けることができますか?これはChromeとすべてのIphoneで発生します。

答えて

4

フォントの行の高さのために起こっています。あなたは簡単に1EMの行の高さに、その特定のハイパーリンクを与えるか、以下のように同じ行の高さに、すべてのアンカータグを与えることによってこの問題を解決することができます -

ul li a { 
 
    line-height: 1em; 
 
}

you can check the image here

+0

ようなもので、単に最初のLiをターゲットにすることができますはい、それは直接フォントで文字セットが、より多くのとは関係のないものでした。私は間違っていたいくつかの不思議な文字セットの動作に焦点を当て...ありがとう! –

1

それはフォントですそれはそれを放つ。リストアイテムの要素を調べると、最初のアイテムは144x36で、残りは144x34であることがわかります。

あなたは

.one li:first-child { 
    font-size: 15px; 
}