0

我想不通。有人可以帮忙吗？我没有制作一个非常复杂的 jsfiddle，而是将所有必要的代码复制并粘贴到一个简单的 html 页面。

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

在 IE9 中，最右侧的文本显示得比其他文本高。我对 IE9 中无意义的开发人员工具感到沮丧，不知道可以调整什么。我尝试添加“垂直对齐：底部；” 和“行高：19pt；” 到 .topboilerplateheadings 但它没有帮助。

有任何想法吗？

在所有其他浏览器中，文本显示得很好。

ps 我正在使用高度定制的响应式引导程序。我的html应该没有什么问题。我猜CSS中有些地方不对劲。我正在使用 jquery 使该发音上的悬停效果更改为实际单词。它适用于所有浏览器，但在 IE9 中，它使单词从其升高的水平跳下，该水平比错误的其余文本高约 5 到 10 px。

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

这是我某天从我的网站上删除该链接时的代码：

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>
4

0 回答 0