Question

请以下人解释一下，因为以下代码HTML在Chrome vers.70.0.3538.110中运行的文本模糊。我正在使用Windows10。我对此感到惊讶，因为在Firefox中，HTML代码可以正常运行而不会产生任何模糊的文本。可以插入编码来避免这种模糊效果吗？预先感谢您的帮助。

<head> <title> Why text is blurred ? </title>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

	
<style>
body { lang="it"; background-color:Grey; color:LightGrey; border:solid 5px CadetBlue; } ul, li {list-style-type: none;}
</style>

</head>

<body> <center>

    <a data-toggle="dropdown" style="cursor:pointer;">
	<span style="font-variant:small-caps;
	margin-right:10em;color:DarkBlue;font-weight:bold;"> 
	&blacktriangledown;&nbsp;click here</span></a>

     <li > 
		<a class="dropdown-menu"  tabindex="-1" 
			href="#" 
			style=" font-size:1.2em; 
			font-variant:small-caps; 
			padding:0.5em; background-color:Grey; 
			color:Black !important;">
			(This text on Chrome is blurred) &larr; Versione 70.0.3538.110 (Build ufficiale) (a 64 bit)
		</a>
	  </li>	
	  
	 <div> <br/>  <br/> <br/>  <br/> </div>
	 
      <li > 
		<a tabindex="-1" 
			href="#" 
			style=" font-size: 1.2em;font-variant: small-caps; 
			padding: 0.5em; background-color: Grey; 
			color:Black !important; margin-left:6em;">
			(This one text on Chrome instead is not blurred) 
		</a>
	  </li>

</body>
</html>

为什么Chrome中的文字模糊？

0 个答案: