firefox和IE

Question

我在IE和Firefox中遇到了bootstrap缩略图和水平滚动条的问题，但没有chrome或移动浏览器。

所以基本上，在firefox和IE中，模态看起来很奇怪并且有一个水平滚动条，但是这个问题不会出现在chrome或手机浏览器中。如图所示，这就是问题

这就是 firefox 中的模态 这就是它在 chrome 中没有任何问题的样子

以及此处的模态代码：

<div class="container" id="portfolio" >
          <hr>
                <div class="row">
                     <div class="col-sm-6 col-md-4">
                         <div class="thumbnail">
                             <a href="Text 101 WebBuild V1/Text 101 WebBuild V1.html" target="_blank">  <img src="images/text101.png" alt="..." class="image">
                                <div class="imgDescription">
                                     <h3 class="img-content"><strong>Text 101</strong></h3>
                                     <span class="modal-button" >
                                     <img src="images/unity1.png" style="height:30px; width:30px;" >    </span>                                         
                               </div>       
                              </a>

                         </div>
                     </div>

                 <div class="col-sm-6 col-md-4">
                         <div class="thumbnail">
                             <a href="landingPage.html"  target="_blank">  <img src="images/myweb-app.png" alt="..." class="image">
                                <div class="imgDescription">
                                     <h3 class="img-content" style="left:95px;"><strong>MyWebsite App</strong></h3>
                                     <span class="modal-button" style="left:145px">
                                     <img src="images/webdev.png" style="height:30px; width:auto;" >    </span> 

                               </div>       
                                </a>
                         </div>
                     </div>




                        <div class="col-sm-6 col-md-4">
                         <div class="thumbnail">
                             <a href="#">  <img src="images/card3.jpg" alt="..." class="image">
                                <div class="imgDescription">
                                     <h3 class="img-content"></h3>
                                     <span class="modal-button"></span>


                               </div>       
                                </a> 
                         </div>
                     </div>

        </div>  <!-- portfolio end here -->

和这里使用的CSS：

.thumbnail {
                position: relative;
                display: inline-block;

            }
            .thumbnail .imgDescription {
                position: absolute;
                top: 4px;
                left: 4px;
                width: 98%;
                height: 96%;
                display: none;
                color: #FFF;
                 -webkit-transition: opacity .25s ease;
                -moz-transition: opacity .25s ease;

            }
            .thumbnail:hover .imgDescription {
                display: block;
                background: rgba(0, 0, 0, .6);
            }

            .thumbnail .imgDescription .img-content {
                position: absolute;
                top: 25%;
                left:35%;
                color:white;    
                }

        .thumbnail .imgDescription .modal-button {
            position: absolute;
                top: 55%;
                left:43%;
        }

我无法确定问题所在，我的意思是它在Chrome和手机浏览器中运行noraml。任何帮助都非常感激。

Answer 1

您的代码不合适。请注意您如何打开<a>代码，然后<div>和<span>，但在</a>和</span>之前关闭</div>。 HTML需要正确嵌套，因此在关闭</a>之前，您需要关闭其下的每个标记。尝试将此代码用于投资组合HTML：

<div class="container" id="portfolio">
    <hr>
    <div class="row">
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <a href="Text 101 WebBuild V1/Text 101 WebBuild V1.html" target="_blank"> <img src="images/text101.png" class="image" width="100%">
                    <div class="imgDescription">
                        <h3 class="img-content"><strong>Text 101</strong></h3>
                         <span class="modal-button">
                             <img src="images/unity1.png" style="height:30px; width:30px;">
                        </span>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <a href="landingPage.html" target="_blank"> <img src="images/myweb-app.png" alt="..." class="image" width="100%">
                    <div class="imgDescription">
                        <h3 class="img-content" style="left:95px;"><strong>MyWebsite App</strong></h3>
                        <span class="modal-button" style="left:145px">
                            <img src="images/webdev.png" style="height:30px; width:auto;">

                        </span>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <a href="#"> <img src="images/card3.jpg" alt="..." class="image" width="100%">
                    <div class="imgDescription">
                        <h3 class="img-content"></h3>
                        <span class="modal-button"></span>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

更新：我还为IE的图片添加了width="100%"。