为什么Chrome检查元素到处都显示<strong>标记

Question

当我使用谷歌浏览器检查我正在工作的网站时，它显示了一堆强大的标签。但是，我的html代码中没有。

如何解决这个问题，以便我可以在我的网站上工作？

这是我的实际HTML：

<main role="main">
    <section id="headline">
            <div class="content">
                <h1><span>Transform your written</span> work into a <strong>masterpiece<strong></h1>
                <a href="javascript:void(0);" class="button openForm">Free Quote</a>
                <p class="first-quote">"Your proofreading assistance has enabled me to successfully complete my dissertation with greater ease."</p>
                <%= image_tag 'sudthida-signature.png', :alt=> "Suditha's Signature" %>
                <p class="subtext">Sudthida P. Ph.D in Educational Research - King's College University of London</p>
            </div><!--close section-container-->
    </section>
    <section id="approach">
            <div class="content">
                <%= image_tag 'editing-proofreading.png', :alt=> "Editing and Proofreading Ven Diagram" %>
                <h2>A <strong>new</strong> approach that brings out the <strong>best</strong> in your work.</h2>
                <p>All writing can benefit from both proofreading and editing.<p>  
                <p>That is why we have developed a unique two-step approach that combines both proofreading and editing into one focused service.</p>
                <p>Simply send us your document and our team will do all that is needed to make your written work its very best.</p> 
            </div><!--content -->
    </section>
    <section id="proofreading">
        <div class="header">
            <h2><%= image_tag 'icon-proofreading50.png', :alt=> "Proofreading Icon" %>Proofreading</h2>
        </div><!-- close proofreading-header -->
        <div class="content">
            <p>Your academic and professional success is directly linked to the quality of your written work. The first step toward achieving this success begins with proofreading.</p>
            <p>In proofreading your document, our objective is to make certain that every word and sentence is correct in order to improve the quality your writing.</p>
            <p>We accomplish this by focusing on a range of fundamental issues that include:</p>
            <ul class="listLeft">
                <li>Spelling</li>
                <li>Punctuation</li>
                <li>Grammar</li>
                <li>Word choice & Semantics</li>
            </ul>
            <ul class="listRight">
                <li>Sentence structure</li>
                <li>Collocation & Syntax</li>
                <li>Typing errors</li>
            </ul>       
        </div> <!-- content -->
    </section>
        <div class="secondQuote">
            <div class="quoteContent">
                <p class="quote">"Your corrections have made me want to improve my writing skills. They are an important part of the learning process that  reduces the number of errors in my work."</p>
                <%= image_tag 'nichan-signature.png', :alt=> "Nichan Signature" %>
                <p class="subtext">Nichan S.  Ph.D. in Asian Studies - University of Brunei</p>
            </div><!--quoteContent-->
        </div> <!-- secondQuote-->
    <section id="editing">
        <div class="header">
            <h2><%= image_tag 'icon-editing50.png', :alt=> "Editing Icon" %>Editing</h2>
        </div><!-- header -->
        <div class="content">
            <p>Our experience has shown that the optimum results in writing are acheived through a combination of editing and proofreading.</p>
            <p>After proofreading, we begin the editing of your written work. Our aim is to ensure that your writing is clear, logical and adheres to any style and formatting requirements.  </p>
            <p>This is accomplished by performing the following:</p>
            <ul class="listLeft">
                <li>Improve clarity</li>
                <li>Check formatting</li>
                <li>Improve logical flow</li>
            </ul>
            <ul class="listRight">
                <li> Eliminate irrelevant words</li>
                <li>Verify adherence to stylistic guidelines</li>
            </ul>       
        </div><!--content -->
    </section>
        <div class="thirdQuote">
            <div class="quoteContent">
                <p class="quote">"All of the manuscripts I have submitted have been published. I'm extremely impressed with the quality and speed of your service."</p>
                <%= image_tag 'somdet-signature.png', :alt=> "Somdet Signature" %>
                <p class="subtext">Somdet. S. Ph.D.  Associate Professor and Chairman of Biochemistry Department  Faculty of Medicine -Chiang Mai University </p>
            </div><!--quoteContent-->
        </div> <!-- thirdQuote-->
    <section id="howItWorks">
            <h2>How it works</h2>
            <div class="stepsContainer">
                <div class="step">
                    <%= image_tag 'icon-explanation-one.png', :alt=> "Icon of a Form" %>
                    <div class="numberCircle">1</div>
                    <p>Submit a sample of your written work using our online <a href="">form</a>.</p>
                </div><!-- step-->
                <div class="step middle">
                    <%= image_tag 'icon-explanation-two.png', :alt=> "Icon of a Checklist" %>
                    <div class="numberCircle">2</div>
                    <p>We review your sample text to determine what is required to bring out the <strong>best</strong> in your work.</p>
                </div><!-- middle -->
                <div class="step">
                    <%= image_tag 'icon-explanation-three.png', :alt=> "Icon of a Quotation" %>
                    <div class="numberCircle">3</div>
                    <p>You <strong>promptly</strong> receive an email with our price quote and clear instructions on how to proceed.</p>
                </div><!-- step -->
            </div><!-- =stepsContainer-->
            <%= link_to (image_tag 'video-screen.png', :alt=> "Video Screen Image"), '#' %>
            <p class="caption">Duration - 2 min.</p>
            <div class="arrow-content">
                <%= image_tag 'arrow.png', :alt=> "Arrow icon pointing towards video screen image" %>
                <p>watch a quick video about how our system saves you money.</p>
            </div><!-- close arrow-content-->
    </section>
    <section id="aboutUs">
            <h2>About Us</h2>
            <div class="content">
                <p>Our team is made up of native English speaking, fully qualified proofreaders / editors. We thoroughly understand and respect the sacrifice and effort that goes into each and every document we read.</p>
                <p>Our mission is to help our clients improve their written work and to assist them in scaling new heights with their writing abilitiy. </p>
                <p>We genuinely care about our clients, their work and their success and have been proud to do so for over 10 years. </p>
                <p class="subtext">A complete list of our credentials is available upon <a href="mailto:mitchell@provenword.com?Subject=Credentials%20Request" target="_top">request</a>.</p>
            </div><!-- content-->
    </section>
    <section id="faq">
        <div class="faq">
            <h2>Frequently Asked Question</h2>
        </div> <!-- faq -->
    </section>
    <section>
        <div class="cta">
            <h2>Start now and bring out the <strong>best</strong> in your work</h2>
            <a href="javascript:void(0);" class="button openForm">Free Quote</a>
        </div> <!-- close cta-->
    </section>
</main>

Answer 1

我明白了，你没有关闭一个<strong>标签，特别是围绕'杰作'这个词的标签

<strong>masterpiece<strong>

应该是：

<strong>masterpiece</strong>

Working example, not like you need one though...

Answer 2

这是因为您在提供的代码的第4行有一个未公开的<strong>标记（可能更多，我没有查看整个内容）。

当标签未关闭时，Chrome检查器会尝试确定动态关闭的位置，这会在检查器视图中生成额外错误的<strong>标记。