

Windows formでのUI面のデザインがシンプルだったりするため、webBrowserを使ってブタンを表示してみようと思いました。  
試しに以下のシンプルなボタンをbtn1.htmlとして、WindowsFormsApplication1.exeと同じフォルダーパスに配置しました。

btn1.htmlの中身は以下のようになっています。

[code]

    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                <style type="text/css">
                    #btn{
                        margin: 0px;
                        width: 180px;
                        border-radius: 5px;
                        box-shadow: 0 4px 0 #e91b0c;
                        background: #f44336;
                        color:#fff;
                        cursor: pointer;
                        padding: 7px;
                        text-align: center;
                    }
                    #btn:hover{
                        opacity: 0.8;
                    }
                    #btn:active{
                        background: #FFA500 ;
                        box-shadow: 0 4px 0 #FFB550 ;
                        width: 150px ;
                        margin: 5px;
                    }
                </style>
                <script type="text/javascript">
    
                </script>
            <title>test</title>
        </head>
    
        <body>
            <div id="btn">button1</div>
        </body>
    </html>
    
[/code]

このbtn1.htmlはIEやChromeで開くとhover、activeはしっかり動いています。  
ですが、これをwebBrowserを実装したWinformで動かすと全く動いてくれません（ボタンの描画はできています）。  
正確にはCSSが反映されていないのでhoverやactiveが読み込まれないようです。

下記がwinformのソースです。

[code]

    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Linq;
    using System.Text;
    using System.Windows.Forms;
    
    namespace WindowsFormsApplication1
    {
        public partial class Form1 : Form
        {
            public Form1( )
            {
                InitializeComponent( );
            }
    
            private void Form1_Load( object sender , EventArgs e )
            {
    
            }
    
            private void button1_Click( object sender , EventArgs e )
            {
                String local ;
                String address ;
    
                local   = Application.StartupPath ;
                address = "file:\\\\" + local + textBox1.Text ;
                label1.Text = address ;
    
                webBrowser1.Navigate( new Uri( address ) ) ;
            }
    
            public bool IsHorizontalScrollbarPresent( WebBrowser web )
            {
                try
                {
                    var widthofScrollableArea   = web.Document.Body.ScrollRectangle.Width;
                    var widthofControl          = web.Document.Window.Size.Width;
    
                    return widthofScrollableArea > widthofControl;
                }
                catch( Exception ex )
                {
                    return false ;
                }
            }
    
            private void webBrowser1_DocumentCompleted( object sender , WebBrowserDocumentCompletedEventArgs e )
            {
                if ( IsHorizontalScrollbarPresent( webBrowser1 ) )
                {
                    webBrowser1.ScrollBarsEnabled   = false ;
                    webBrowser1.Document.Body.Style = "zoom:40%" ;
                    webBrowser1.Visible             = true ;
                }
                else
                {
                    webBrowser1.Visible             = true ;
                }
            }
        }
    }
    
[/code]

どう修正したらCSSが反映されるようになるのでしょうか。


CC BY-SA 4.0
2018-09-21T23:36:37.797
48632
2023-05-07T03:19:19.387
2023-05-07T03:19:19.387
4236
29866
question
c# css winforms
Windows formでWebBrowserを使うとCSSが反映されない


WebBrowserコントロールは描画にInternet Explorerを使用しています。そしてInternet
Explorerにはブラウザーモードとドキュメントモードがあり、これを理解する必要があります。

  * WebBrowserコントロールは表示内容が変化しないように互換性を維持するため、IE7ブラウザーモードとなります。
  * IE10以下のブラウザーモードで適切な`<!DOCTYPE>`宣言がされていない場合、IE5ドキュメントモードで表示されます。

その上で質問文にあるHTMLには`<!DOCTYPE>`宣言が含まれていないため、CSSが反映されないのではなくIE5モードで表示されているだけです。参考までにIE11で当該HTMLを開きF12開発者ツールを使用してドキュメントモードをIE5に指定すると同じ結果を見ることができます。

WebBrowserコントロールのブラウザーモードを変更するにはWebBrowserコントロールを読み込む前に[Browser
Emulation](https://docs.microsoft.com/en-us/previous-
versions/windows/internet-explorer/ie-developer/general-
info/ee330730\(v%3Dvs.85\)#browser-emulation)のレジストリ値を設定します。


CC BY-SA 4.0
2018-09-22T08:37:51.460
48640
2018-09-22T08:37:51.460
4236
48632
answer