Clever Geek Handbook

Possible error in Visual Studio when using "display: inline-block" and "line-height" together in view mode

CODE:

<%@ Page Language="VB" %>
<!DOCTYPE html>
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #container{
            border:4px solid red;
            box-sizing:border-box;
        }
        #block1,#block2{
            display:inline-block;
            /*float:left;*/
            vertical-align:top;
            text-align:center;
            font-size:18px;
            line-height:22px;
            width:200px;
            height:200px;
        }

        #block1{           
            background-color:ActiveBorder;
        }
        #block2{
            background-color:#808080;
        }
    </style>
</head>
<body>

    <div id="container">
        <div id="block1">
            Block 1<br />
            needs to<br />
            have a<br />
            few rows<br />
            of text<br />
            that we<br />
            can show<br />
            to our<br />
            viewers
        </div><!--
        --><div id="block2">
            Block 2
        </div>
        <div style="clear:both;" />
    </div>      
</body>
</html>

Description:

  • Create a simple .aspx file in Visual Studio 2013
  • Create a parent container div

    with a visible border.
  • Create two div

    200px x 200px children .
  • Add property display:inline-block;

    to child div

    s
  • Add a property line-height

    to the child div

    eg line-height:22px;

    .

Expected Results: In Design-Time, the parent container div

should wrap both child div

s

Actual results: In design view, the parent container div

will collapse behind the child div

s Right click on the file and choose View Browser, the parent container will div

display as expected

NOTES:

  • If you remove the property the line-height

    parent container div

    behaves just fine
  • If you leave line-height

    and change display:inline-block;

    to float:left

    and clear them, then the parent container will behave normally as well.
  • All of them display fine when viewed in real time in a browser.
+3


source to share


1 answer


Below is the result that was filed as a bug report on Microsoft Connect:

Hello from Microsoft Connect!

This notice was generated for a feedback item: Potential error in Visual Studio when using "display: inline-block" and "line-height" together in a design view that you submitted to Microsoft Connect.

Thank you for passing this issue to us. We value all our customers' feedback, but unfortunately we cannot fix every item that comes in. We have appreciated the question you submitted and we do not expect an update for it at this time. If an issue is blocking you from using the product, please contact our support team using Visual Studio Help and Support ( http://msdn.microsoft.com/en-us/vstudio/cc136615.aspx ) on MSDN.



You may also receive a general update "Feedback" notice if any other changes have been made by Microsoft.

Thank you for using Microsoft Connect!

Hello,

Microsoft Connect team

Microsoft has recognized the BUG and continues to argue that they are not interested in fixing it for a peon like me. This is what happens when we create working workarounds instead of reporting errors in the volume ............

+1


source






More articles:


All Articles