iframeコンテンツの周りに空の領域があるのはなぜですか?
質問
私は、人々が自分のウェブサイトでウィジェットとして使用したいiframeコードを作成しました。このiframeは、ボタンとカウンターがあるWebページをロードします。アクセスしたページにグラフィックがあります。
ただし、iframeはブラウザでレンダリングされ、周囲に白い空の領域が表示されます。なんでこんなことが起こっているの?コードは次のとおりです。-
クライアント側:
<script type="text/javascript">
window.onload = function() {
document.all.myframe.src = "blogup.aspx?url=" + window.location.href;
}
</script>
<iframe id="myframe" height="75" width="235" scrolling="no" frameborder="0">
</iframe>
表示されるページ
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="blogup.aspx.cs" Inherits="blogup" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<form id="form1" runat="server">
<img style="float: left" src="images/blogup1.jpg" alt="Blogvani.com - Indian blogs aggregator" />
<div style="font-family: Verdana; font-size: 16px; margin:0;padding:0;font-weight: bold; background: url('images/blogup2.jpg') no-repeat;
height: 50; width: 44; padding: 22px 5px 5px 5px; text-align: center">
<a href="javascript:voteup('<%= PostURL %>')" id="votecount" style="text-decoration: none;
color: #026A88">115</a></div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server">
<Services>
<asp:ServiceReference Path="~/Services.asmx"
</Services>
</asp:ScriptManager>
</form>
</body>
</html>
注:インラインCSSを使用しています。マージンとパディングは0に設定されていますが、画像は上と左から少しずれて表示されています。
アイデアはありますか
解決
<body>
からパディングとマージンを削除する必要があります。
他のヒント
同様の問題がありました。空の領域は、iframe自体のページです。 iframeに含まれるページのスタイルシートでmargin-left:-10px; margin-top:-10px
を実行して削除しました。
このスタイルコードを試して、空のスペースを囲むiframeを削除します
<style>
iframe { display:block; }
html, body {
border: 0px;
margin: 0px;
padding: 0px;
}
</style>
所属していません StackOverflow