<a>标签占全宽,尽管我把它设置为100px

我有下面的代码,当点击一个灯箱打开一个产品标签。当在移动设备上查看时,它会显示相同的图像,但单击它会在新选项卡中打开标签。(lightbox响应灵敏,因此移动设备上的图像太小)。

但由于某些原因,在移动视图中,标记占据了整个宽度,因此如果单击它的右侧,它将在新选项卡中打开图像。我不明白这是为什么,因为我把它的宽度设置为100像素。

<style>
#lightbox {
    position: fixed;
    /* keeps the lightbox window in the current viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    /*use below to make a 1px black image with 75% opacity for the dark background instead of above. above has issues in IE*/
    /*background:url(overlay.png) repeat; */
    text-align: center;
    z-index: 99999;
}

#lightbox p {
    text-align: center;
    color: #fff;
    margin-right: 20px;
    font-size: 20px;
    margin-bottom: 10px;
    margin-top: 10px;
    z-index: 99999;
}

#lightbox img {
    box-shadow: 0 0 25px #111;
    -webkit-box-shadow: 0 0 25px #111;
    -moz-box-shadow: 0 0 25px #111;
    width:80%;
    max-width: 940px;
    max-height: 800px;
    z-index: 99999;
}

.mobile_label_view{
display:none;
}

@media only screen and (max-width: 950px) {

    .lightbox_trigger{
    display:none;

    }
    .mobile_label_view{
display:block;

}
}

.lightbox_trigger{
    margin-top:15px;
    cursor: pointer;
}
.mobile_label_view{
    margin-top:15px;
    cursor: pointer;
}
a.label_container{
    max-width:100px !important;
    width:100px !important;
}
</style>

<div id="wrapper">
    <!--have view label text-->
    <!--<a href="/image.png" class="lightbox_trigger">-->
 <!--               View Label-->
 <!--               </a>-->
 <!--               <a href="/image.png" target="_blank" class="mobile_label_view">-->
 <!--               View Label-->
 <!--               </a>-->
 <img src="/image.png" width="100px" class="lightbox_trigger">
 <a href="/image.png" target="_blank" class="label_container"><img src="/image.png" width="100px" class="mobile_label_view"></a>
</div>
<!-- #/wrapper -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    jQuery(document).ready(function($) {

        $('.lightbox_trigger').click(function(e) {

            //prevent default action (hyperlink)
            e.preventDefault();

            //Get clicked link href
            //var image_href = $(this).attr("href");
            //Get clicked link src
            var image_href = $(this).attr("src");

            /*  
            If the lightbox window HTML already exists in document, 
            change the img src to to match the href of whatever link was clicked

            If the lightbox window HTML doesn't exists, create it and insert it.
            (This will only happen the first time around)
            */

            if ($('#lightbox').length > 0) { // #lightbox exists

                //place href as img src value
                $('#content').html('<img src="' + image_href + '" />');

                //show lightbox window - you could use .show('fast') for a transition
                $('#lightbox').show();
            }

            else { //#lightbox does not exist - create and insert (runs 1st time only)

                //create HTML markup for lightbox window
                var lightbox =
                    '<div id="lightbox">' +
                    '<p onclick=\'hideLightbox()\'>Click to close</p>' +
                    '<div id="content">' + //insert clicked link's href into img src
                    '<img src="' + image_href + '" />' +
                    '</div>' +
                    '</div>';

                //insert lightbox HTML into page
                $('body').append(lightbox);
            }

        });

        //Click anywhere on the page to get rid of lightbox window
        $('#lightbox').live('click', function() { //must use live, as the lightbox element is inserted into the DOM
            $('#lightbox').hide();
        });

    });

    function hideLightbox() {

        $('#lightbox').hide();
    }
</script>