html - Firefox 和 IE 中的 Bootstrap 缩略图和水平滚动条

Question

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

所以基本上，在 firefox 和 IE 中，modals 看起来很奇怪，并且有一个水平滚动条，但是这个问题不会出现在 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>

更新:我还添加了 width="100%"到 IE 的图像。