Question

我无法弄清楚这一点。有人可以帮忙吗？我没有把一个非常复杂的jsfiddle复制并粘贴到一个简单的html页面上。

http://brangeta.com/testing/problem.html

在IE9中，最右侧的文本显示高于其他文本。我对IE9中无意义的开发人员工具感到沮丧，无法弄清楚可以调整的内容。我尝试添加“vertical-align：bottom;”和“行高：19pt;”到.topboilerplateheadings但它没有帮助。

有什么想法吗？

在所有其他浏览器中，文本显示正常。

P.S。我正在使用响应式引导程序，我已经高度定制。我的HTML应该没有任何问题。我猜的CSS中有些东西不对。我正在使用jquery使该发音上的悬停效果变为实际单词。它适用于所有浏览器，但在IE9中，它使得单词从其升高的级别跳下来，比其他错误的文本高出约5到10 px。

我希望“/ˌenjәni（ә）r /”与文本的其余部分位于同一基线上，理想情况下是其他人当前所处的确切级别。我认为可能是因为没有使用特殊字符的代码，但我不知道＆amp; _ ;对于这些字母，找不到任何搜索结果。

以下是有朝一日我从我的网站上删除该链接的代码：

http://jsfiddle.net/nYAkR/

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700|Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<style type="text/css">
.row-fluid {
  width: 100%;
  *zoom: 1;
}
.row-fluid:before,
.row-fluid:after {
  display: table;
  content: "";
  line-height: 0;
}
.row-fluid:after {
  clear: both;
}
.row-fluid [class*="span"] {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  margin-left: 4.121475054229935%;
  *margin-left: 4.067245119305857%;
}
.row-fluid [class*="span"]:first-child {
  margin-left: 0;
}
.row-fluid .controls-row [class*="span"] + [class*="span"] {
  margin-left: 4.121475054229935%;
}
.row-fluid .span3 {
  width: 16.702819956616054%;
  *width: 16.648590021691977%;
}
.row-fluid .offset1 {
  margin-left: 11.062906724511931%;
  *margin-left: 10.954446854663773%;
}
.row-fluid .offset1:first-child {
  margin-left: 6.941431670281996%;
  *margin-left: 6.83297180043384%;
}
h2 { /*main body headers and boilerplate headings*/
    font-family: "Open Sans", "Kozuka Gothic Pro", "Kozuka Gothic Pr6N", "Kozuka Gothic Std", Helvetica, "Helvetica Neue", Verdana, sans-serif;
    font-size:13pt;
    font-style:normal;
    font-weight:300;
    line-height:19pt;
    color:#58585A;
    text-align:center;
    margin: 10px 0;
    text-rendering: optimizelegibility;
}
a {
  color: #818285;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #58585a;
  text-decoration: none;
}
.topboilerplateheadings {
    color:#939598;
    padding-top:14px;
    padding-bottom:10px;
    margin-bottom:20px;
    margin-top:15px;
}
</style>
  <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
 if (typeof jQuery == 'undefined'){
    document.write(unescape('%3Cscript src="js/jquery-min.js" %3E%3C/script%3E'));
 }
</script>
<script>
$(function(){
  var prev;    

  $('.engineer').hover(function(){
  prev = $(this).text();
      $(this).text("engineer");
  }, function(){
      $(this).text(prev)
  });
})
</script>
</head>

<body>
    <div class="row-fluid">

<div class="span3">
<h2 class="topboilerplateheadings"><a href="#">&mdash; our story &mdash;</a></h2>
</div>

<div class="span3 offset1">
<h2 class="topboilerplateheadings"><a href="#">&mdash; news &mdash;</a></h2>
</div>

<div class="span3 offset1">
<h2 class="topboilerplateheadings"><a href="#">&mdash; events &mdash;</a></h2>
</div>

<div class="span3 offset1">
<h2 class="topboilerplateheadings"><a href="#">&mdash; <span class="engineer">/ˌenjәˈni(ә)r/</span> &mdash;</a></h2>
</div>

</div>
</body>
</html>

IE显示比其他文本更高的非标准字符

0 个答案: