Internet Explorer 和 Firefox 中的 Twitter 小部件格式

Question

我从 http://twitter.com 下载了 JavaScript 代码，以便在该网站首页的一个块中嵌入一个 Twitter 小部件：http://www.fareham.vm.bytemark.co.uk/。

该块在 Google Chrome (10.0.648.133) 和 Opera (11.01) 中呈现良好，但在 Internet Explorer (7.0.5730.13CO) 和 Firefox (3.6.15) 中，该块呈现不正确，遮挡了最新的新闻块.

CSS 代码加载自：http://widgets.twimg.com/j/2/widget.css:

.twtr-widget {
    position:relative;
    font-size:12px!important;
    font-family:"lucida grande",lucida,tahoma,helvetica,arial,sans-serif!important;
    zoom:1;
}
.twtr-fullscreen {
    font-size:220%!important;
}
.twtr-fullscreen .twtr-new-results {
    _display:none!important;
}
.twtr-inactive {
    display:none;
}
.twtr-widget a img {
    border:0!important;
}
.twtr-doc {
    overflow:hidden;
    width:100%;
    text-align:left;
    font-weight:normal;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.twtr-bd {
    padding:0 1px;
}
.twtr-widget .twtr-tweet-wrap {
    padding:6px 8px;
    overflow:hidden;
    zoom:1;
}
.twtr-fullscreen .twtr-tweet-wrap {
    padding:20px;
}
.twtr-widget .twtr-tweet {
    border-bottom:1px dotted #ddd;
    overflow:hidden;
    zoom:1;
}
.twtr-widget-profile img.twtr-profile-img {
    display:block;
    float:left;
    width:31px;
    height:31px;
    border:0!important;
}
.twtr-widget h3,.twtr-widget h4,.twtr-widget p {
    margin:0!important;
    padding:0!important;
    line-height:1.2!important;
    width:auto!important;
}
.twtr-widget-profile h3,.twtr-widget-profile h4 {
    margin:0 0 0 40px!important;
}
.twtr-widget h3 {
    font-size:11px!important;
    font-weight:normal!important;
}
.twtr-widget h4 {
    font-size:16px!important;
}
.twtr-widget em,.twtr-widget .twtr-new-results {
    font-size:9px;
    font-style:normal;
    display:block;
    margin-top:2px;zoom:1;
}
.twtr-widget .twtr-new-results {
    text-align:center;
    padding:3px;
    margin:0 auto -10px auto!important;
    display:block;
    position:relative;
    bottom:5px;
    line-height:.9;
}
.twtr-results-inner {
    line-height:1;
    font-size:100%;
    padding:4px 0;
    position:relative;
    bottom:-2px;
    width:40%;
    margin:0 auto;
    z-index:2;
    text-align:center;
}
.twtr-results-hr {
    width:100%;
    position:relative;
    z-index:1;
    height:1px;
    border-bottom:1px dotted #ddd;
    bottom:7px;
    background:none;
    overflow:hidden;
}
.twtr-new-results span {
    position:relative;
    z-index:3;
    top:-14px;
    display:block;
    font-size:9px!important;
}
.twtr-fullscreen .twtr-new-results span {
    font-size:24px!important;
}
.twtr-hd {
    padding:10px;
    position:relative;
    zoom:1;
    overflow:hidden;
}
.twtr-fullscreen .twtr-hd {
    height:0;
    padding:0;
}
.twtr-timeline {
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    position:relative;
    overflow:hidden;
    z-index:2;
    height:225px;
}
.twtr-scroll .twtr-timeline {
    overflow-x:hidden;
    overflow-y:auto;
}
.twtr-widget .twtr-tweet:last-child {
    border-bottom-width:0;
}
.twtr-ft {
    position:relative;
}
.twtr-ft div {
    overflow:hidden;
    padding:10px;zoom:1;
}
.twtr-ft span {
    float:right;text-align:right;
}
.twtr-ft a {
    float:left;display:block;
}
.twtr-ft a img {
    position:relative;
    top:2px;
}
.twtr-ft span a {
    float:none;
}
.twtr-avatar {
    width:40px;
    height:40px;
    float:left;
    overflow:hidden;
    display:block;
}
.twtr-fullscreen .twtr-avatar {
    width:80px;
    height:80px;
}
.twtr-img {
    height:25px;
    width:25px;
}
.twtr-img img {
    width:30px;
    height:30px;
}
.twtr-fullscreen .twtr-img img {
    width:72px;
    height:72px;
}
.twtr-fullscreen a.twtr-join-conv {
    display:none;
}
.twtr-tweet-text {
    margin-left:40px;
}
.twtr-fullscreen .twtr-tweet-text {
    margin-left:90px;
}
.twtr-popular {
    font-size:10px;
    padding:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    display:inline-block;
    margin-top:3px;
    opacity:.8;
}
.twtr-doc a {
    text-decoration:none!important;
}
.twtr-doc a:hover {
    text-decoration:underline!important;
}

Answer 1

首先你的问题与positioning无关。

您的 <h2> 元素位于 Twitter 提要之前...

<h2>Twitter Timeline</h2>

...受到以下 CSS 规则的影响：（demo.css，第 10 行）

.promo-center-2cols .block h2 {
    float:left;
    width:320px
}

删除float:left。问题是它后面有一个 div... (class="twtr-doc")

<h2>Twitter Timeline</h2>
<div class="content">
    <div id="twtr-widget-1" class="twtr-widget twtr-widget-profile">
        <div class="twtr-doc" style="width:100%;">

...这是以下规则的目标：（widget.css 第 12 行）

.twtr-doc {
    overflow:hidden;
    width:100%;text-align:left;
    font-weight:normal;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

float 和 overflow 一起造成了您的问题。您必须更改其中一个，并且由于 widget.css 来自 widgets.twimg.com (Twitter) 我认为您无法更改它，因此请更改 demo.css 中的 float 值。