Perché il mio contenuto iframe ha un'area vuota attorno ad esso?

StackOverflow https://stackoverflow.com/questions/413912

  •  03-07-2019
  •  | 
  •  

Domanda

Ho creato un codice iframe che voglio che le persone utilizzino come widget sul loro sito Web. Questo iframe caricherà una pagina web che ha un pulsante e un contatore. Nella pagina accessibile ho un'immagine.

Ma l'iframe viene visualizzato nel browser con un'area vuota bianca attorno ad esso. Perché sta succedendo? Ecco il mio codice: -

Sul lato client: 

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

La pagina che dovrebbe essere visualizzata 

<%@ 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>

Nota: sto usando CSS in linea. Il margine e il riempimento sono impostati su 0, ma le immagini vengono visualizzate con un piccolo offset dall'alto e da sinistra.

Qualche idea?

È stato utile?

Soluzione

Probabilmente dovrai rimuovere padding e margini da <body>.

Altri suggerimenti

Ho avuto un problema simile. L'area vuota è della pagina nell'iframe stesso. L'ho rimosso facendo margin-left:-10px; margin-top:-10px nel foglio di stile della pagina contenuto nell'iframe.

Prova questo codice di stile che rimuoverà iframe che circonda lo spazio vuoto 

<style>
    iframe { display:block; }
    html, body {
        border: 0px;
        margin: 0px;
        padding: 0px;
    }
    </style>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top